/* ==========================================================================
   WEB99.IE
   Hand-written. No framework, no utility classes, no component library.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  --violet: #5b3fe8;
  --violet-deep: #4429c7;
  --violet-ink: #2d1b8f;
  --lav: #efebfe;
  --lav-line: #ded5fb;
  --ink: #141033;
  --muted: #6b6790;
  --white: #fff;
  --amber: #ffb020;

  --shadow-sm: 0 2px 8px rgba(91, 63, 232, 0.07);
  --shadow-md: 0 18px 40px -18px rgba(91, 63, 232, 0.35);
  --shadow-btn: 0 10px 24px -8px rgba(91, 63, 232, 0.55);

  --r-card: 16px;
  --r-lg: 28px;

  --gut: clamp(20px, 5vw, 40px);
  --wrap: 1180px;
  --section-y: clamp(64px, 9vw, 118px);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
}

/* --- 2. Reset ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17.5px;
  line-height: 1.62;
  font-weight: 450;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 900px) {
  body {
    font-size: 18px;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 3. Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap--narrow {
  max-width: 780px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--lav {
  background: var(--lav);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 76px);
}

/* anchored sections must clear the sticky header */
section[id] {
  scroll-margin-top: 92px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
}

.skip:focus {
  left: 0;
}

/* --- 4. Type ------------------------------------------------------------ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--violet);
  flex: none;
}

.eyebrow--center {
  justify-content: center;
}

.h1 {
  font-size: clamp(2.85rem, 7.4vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.h2 {
  font-size: clamp(2rem, 4.3vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.28rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 800;
}

.lede {
  font-size: clamp(1.14rem, 2.1vw, 1.42rem);
  line-height: 1.45;
  color: var(--muted);
  font-weight: 500;
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(38px, 5vw, 62px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head .lede {
  margin-top: 18px;
}

.muted {
  color: var(--muted);
}

.price-tag {
  color: var(--violet);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 19px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.btn:hover {
  background: var(--violet-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(68, 41, 199, 0.6);
}

.btn:active {
  transform: translateY(0);
}

.btn__arrow {
  transition: transform 0.18s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--lg {
  padding: 22px 42px;
  font-size: 1.14rem;
}

.btn--white {
  background: #fff;
  color: var(--violet-deep);
  box-shadow: 0 14px 30px -12px rgba(10, 4, 40, 0.5);
}

.btn--white:hover {
  background: #fff;
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--lav-line);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--lav);
  color: var(--ink);
  border-color: var(--violet);
}

.btn--block {
  width: 100%;
}

@media (max-width: 480px) {
  .btn {
    width: 100%;
  }

  .hdr .btn,
  .composer .btn {
    width: auto;
  }
}

/* micro-copy that sits under a CTA */
.micro {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 550;
  margin-top: 16px;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--violet);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--lav-line);
  padding-bottom: 2px;
  transition: border-color 0.16s ease;
}

.textlink:hover {
  border-color: var(--violet);
}

/* --- 6. Decoration: arcs + dot grid ------------------------------------- */

.arc {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* opt out of the global svg{max-width:100%} — these are meant to overflow */
  max-width: none;
}

.dots {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  color: var(--violet);
  opacity: 0.16;
}

/* --- 7. Header ---------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.hdr[data-stuck="true"] {
  border-bottom-color: var(--lav-line);
}

.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: var(--ink);
}

.logo__mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}

.logo b {
  color: var(--violet);
  font-weight: 800;
}

.logo span {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
}

.nav {
  display: none;
  align-items: center;
  gap: 30px;
}

.nav a {
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  color: var(--ink);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.16s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom-color: var(--violet);
}

.hdr .btn {
  padding: 13px 24px;
  font-size: 0.98rem;
  width: auto;
}

/* menu button — phones and small tablets only */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  margin-right: 4px;
  background: transparent;
  border: 0;
  padding: 10px 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 10px;
}

.burger__box {
  display: grid;
  gap: 4px;
  width: 20px;
}

.burger__box span {
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.22s ease,
    opacity 0.18s ease;
}

.hdr[data-open="true"] .burger__box span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hdr[data-open="true"] .burger__box span:nth-child(2) {
  opacity: 0;
}

.hdr[data-open="true"] .burger__box span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 899px) {
  .nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--lav-line);
    box-shadow: 0 18px 30px -22px rgba(20, 16, 51, 0.4);
    padding: 6px var(--gut) 18px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 0.26s ease,
      visibility 0s linear 0.26s;
  }

  .hdr[data-open="true"] .nav {
    max-height: 380px;
    visibility: visible;
    transition:
      max-height 0.3s ease,
      visibility 0s;
  }

  .nav a {
    display: block;
    padding: 15px 2px;
    font-size: 1.08rem;
    font-weight: 700;
    border-bottom: 1px solid var(--lav-line);
  }

  .nav a:last-child {
    border-bottom: 0;
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    color: var(--violet);
    border-bottom-color: var(--lav-line);
  }
}

@media (min-width: 900px) {
  .burger {
    display: none;
  }

  .nav {
    display: flex;
  }
}

@media (max-width: 620px) {
  .hdr__in {
    gap: 10px;
  }

  .hdr .btn {
    padding: 12px 17px;
    font-size: 0.88rem;
  }

  .burger {
    margin-right: 0;
    padding: 10px 4px;
  }

  .burger__label {
    display: none;
  }
}

@media (max-width: 420px) {
  .hdr .btn {
    padding: 11px 15px;
    font-size: 0.84rem;
  }

  .hdr__cta .btn__arrow {
    display: none;
  }
}

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 84px) clamp(52px, 7vw, 92px);
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(40px, 5vw, 56px);
  align-items: center;
}

@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(48px, 5vw, 72px);
  }
}

.hero__copy {
  position: relative;
  z-index: 3;
}

.hero .h1 {
  max-width: 12ch;
}

.hero__sub {
  margin-top: 26px;
  max-width: 30ch;
}

.hero__cta {
  margin-top: 36px;
}

.hero__dots {
  top: -30px;
  left: -40px;
  width: 260px;
  height: 210px;
}

/* The signature sweep. Anchored to the hero panel, not the section, so it
   wraps the image at every width instead of drifting off-composition. */
.hero__arc {
  top: 50%;
  left: 56%;
  width: 176%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
}

@media (max-width: 939px) {
  .hero__arc {
    left: 52%;
    top: 54%;
    width: 138%;
    opacity: 0.55;
  }
}

/* the hero card column — also the anchor the signature arc is drawn around */
.hero__visual {
  position: relative;
  isolation: isolate;
}

/* --- 9. Steps ---------------------------------------------------------- */

.steps {
  display: grid;
  gap: 34px;
  position: relative;
}

.step {
  position: relative;
  padding-left: 74px;
}

.step__num {
  position: absolute;
  left: 0;
  top: -4px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--violet);
  color: var(--violet);
  font-weight: 800;
  font-size: 1.2rem;
  z-index: 2;
}

.section--lav .step__num {
  background: var(--lav);
}

.step__icon {
  color: var(--violet);
  margin-bottom: 14px;
  display: none;
}

.step h3 {
  margin-bottom: 9px;
}

.step p {
  color: var(--muted);
  font-size: 1.02rem;
}

/* the connecting line: vertical on mobile, horizontal on desktop */
.step::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: -34px;
  width: 2px;
  background: var(--lav-line);
  z-index: 1;
}

.step:last-child::before {
  display: none;
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }

  .step {
    padding-left: 0;
    padding-top: 76px;
  }

  .step__num {
    top: 0;
    left: 0;
  }

  .step__icon {
    display: block;
    position: absolute;
    top: 8px;
    left: 74px;
    margin: 0;
    opacity: 0.34;
  }

  .step::before {
    left: 54px;
    right: -30px;
    top: 26px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

.steps-note {
  margin-top: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--lav-line);
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 0.96rem;
}

.section--lav .steps-note {
  background: #fff;
}

.steps-note svg {
  color: var(--violet);
  flex: none;
}

/* --- 10b. What's included -----------------------------------------------
   Two generous columns. Read before anything else on the page. */

.incl {
  display: grid;
  gap: 30px 48px;
}

@media (min-width: 720px) {
  .incl {
    grid-template-columns: repeat(2, 1fr);
  }
}

.incl__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}

.incl__ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--lav);
  color: var(--violet);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--lav-line);
}

.section--lav .incl__ic {
  background: #fff;
}

.incl__item h3 {
  margin-bottom: 6px;
}

.incl__item p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.incl__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--violet);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  border-bottom: 2px solid var(--lav-line);
  padding-bottom: 1px;
  transition: border-color 0.16s ease;
}

.incl__link:hover {
  border-color: var(--violet);
}

.incl__link svg {
  transition: transform 0.16s ease;
}

.incl__link:hover svg {
  transform: translateX(3px);
}

/* the reveal. A <details> so it works with JavaScript switched off. */
.incl-more {
  margin-top: 40px;
  border-top: 1px solid var(--lav-line);
  padding-top: 34px;
}

.incl-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 15px 30px;
  border: 2px solid var(--lav-line);
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.incl-more > summary::-webkit-details-marker {
  display: none;
}

.incl-more > summary:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: #faf8ff;
}

.incl-more > summary svg {
  transition: transform 0.18s ease;
}

.incl-more > summary:hover svg {
  transform: translateX(4px);
}

.incl-more__b {
  display: none;
}

.incl-more[open] > summary .incl-more__a {
  display: none;
}

.incl-more[open] > summary .incl-more__b {
  display: inline;
}

/* The panel is a normal block so it always spans the column; only the
   summary pill is centred. */
.incl--rest {
  margin-top: 38px;
}

@media (prefers-reduced-motion: no-preference) {
  .incl-more[open] .incl--rest {
    animation: inclIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

@keyframes inclIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- 11. Capability grid (hairline spec-sheet, not floating cards) ------ */

.capgrid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--lav-line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
}

.cap {
  padding: 30px 28px;
  border-bottom: 1px solid var(--lav-line);
  transition: background 0.18s ease;
}

.cap:last-child {
  border-bottom: 0;
}

.cap:hover {
  background: #faf8ff;
}

.cap svg {
  color: var(--violet);
  margin-bottom: 16px;
}

.cap h3 {
  margin-bottom: 7px;
}

.cap p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

@media (min-width: 620px) {
  .capgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cap {
    border-right: 1px solid var(--lav-line);
  }

  .cap:nth-child(2n) {
    border-right: 0;
  }

  .cap:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 940px) {
  .capgrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cap:nth-child(2n) {
    border-right: 1px solid var(--lav-line);
  }

  .cap:nth-child(3n) {
    border-right: 0;
  }

  .cap:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
}

.cap-footer {
  margin-top: 44px;
  text-align: center;
}

.cap-footer strong {
  display: block;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

/* --- 12. Value stack (a receipt, not a pricing card) -------------------- */

.receipt {
  max-width: 620px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--lav-line);
  border-radius: var(--r-card);
  padding: clamp(28px, 4.5vw, 46px);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* perforated top edge */
.receipt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 6px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: linear-gradient(90deg, var(--violet), #8b6cff);
}

.receipt__head {
  text-align: center;
  margin-bottom: 28px;
}

.receipt__head span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.rrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 14px;
  font-size: 1.03rem;
}

.rrow__name {
  font-weight: 600;
}

.rrow__dots {
  flex: 1;
  border-bottom: 2px dotted var(--lav-line);
  transform: translateY(-4px);
  min-width: 18px;
}

.rrow__val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 0;
  white-space: nowrap;
}

.receipt hr {
  border: 0;
  border-top: 2px dashed var(--lav-line);
  margin-block: 22px;
}

.rtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-weight: 700;
  color: var(--muted);
  font-size: 1.05rem;
}

.rtotal span:last-child {
  text-decoration: line-through;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  font-variant-numeric: tabular-nums;
}

.rpay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.rpay__label {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.rpay__fig {
  font-size: clamp(3.6rem, 9vw, 5.4rem);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.055em;
  color: var(--violet);
  font-variant-numeric: tabular-nums;
}

.receipt__after {
  text-align: center;
  margin-top: 34px;
}

.receipt__after p {
  font-weight: 700;
  margin-bottom: 22px;
  font-size: 1.06rem;
}

/* Hero variant: same receipt, tightened so it sits beside the headline. */
.receipt--hero {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 32px) clamp(26px, 3vw, 32px);
}

.receipt--hero .receipt__head {
  text-align: left;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lav-line);
}

.receipt--hero .receipt__head strong {
  display: block;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.receipt--hero .receipt__head span {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.receipt--hero .rrow {
  padding-block: 7.5px;
  font-size: 0.97rem;
}

.receipt--hero hr {
  margin-block: 16px;
}

.receipt--hero .rtotal {
  font-size: 1rem;
}

.receipt--hero .rpay {
  margin-top: 12px;
}

.receipt--hero .rpay__fig {
  font-size: clamp(3rem, 6vw, 3.9rem);
}

.receipt__cta {
  margin-top: 20px;
}

.receipt__micro {
  text-align: center;
  margin-top: 12px;
  font-size: 0.88rem;
}

/* --- 13. Reassurance grid ----------------------------------------------- */

.reasons {
  display: grid;
  gap: 34px 40px;
}

@media (min-width: 640px) {
  .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .reasons {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reason {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
}

.reason__ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--lav);
  color: var(--violet);
  display: grid;
  place-items: center;
}

.section--lav .reason__ic {
  background: #fff;
}

.reason h3 {
  margin-bottom: 6px;
}

.reason p {
  color: var(--muted);
  font-size: 1rem;
}

/* --- 13b. Sample designs -------------------------------------------------
   Screenshots are shown whole, at their own aspect ratio. Nothing is cropped
   to fit a box — that is what made them look wrong. */

.shots {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
}

@media (min-width: 760px) {
  .shots {
    grid-template-columns: repeat(2, 1fr);
  }
}

.shot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--lav-line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease;
}

.shot:hover {
  transform: translateY(-3px);
}

.shot__frame {
  aspect-ratio: 1040 / 770;
  background: var(--lav);
  border-bottom: 1px solid var(--lav-line);
}

.shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.shot__cap {
  padding: 20px 24px 22px;
}

.shot__cap strong {
  display: block;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.shot__cap span {
  color: var(--muted);
  font-size: 1rem;
}

/* --- 14. Pills ---------------------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.pills li {
  background: #fff;
  border: 1px solid var(--lav-line);
  border-radius: 999px;
  padding: 11px 21px;
  font-weight: 700;
  font-size: 1rem;
  transition:
    border-color 0.16s ease,
    color 0.16s ease;
}

.section--lav .pills li {
  background: #fff;
}

.pills li:hover {
  border-color: var(--violet);
  color: var(--violet);
}

/* --- 15. Counter band --------------------------------------------------- */

.counter {
  background: var(--violet);
  color: #fff;
  text-align: center;
  padding-block: clamp(52px, 7vw, 82px);
  position: relative;
  overflow: hidden;
}

.counter .dots {
  color: #fff;
  opacity: 0.2;
  inset: 0;
}

.counter__fig {
  position: relative;
  z-index: 2;
  font-size: clamp(4rem, 13vw, 8rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.counter__lbl {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.86);
}

/* empty, honest testimonial slots */
.tslots {
  display: grid;
  gap: 20px;
  margin-top: 46px;
}

@media (min-width: 780px) {
  .tslots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tslot {
  border: 2px dashed var(--lav-line);
  border-radius: var(--r-card);
  padding: 30px 26px;
  text-align: left;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.tslot__mark {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--lav-line);
  font-weight: 800;
}

.tcard {
  background: #fff;
  border: 1px solid var(--lav-line);
  border-radius: var(--r-card);
  padding: 30px 26px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.tcard blockquote {
  margin: 0 0 18px;
  font-size: 1.06rem;
  line-height: 1.5;
  font-weight: 600;
}

.tcard cite {
  font-style: normal;
  font-weight: 800;
  font-size: 0.98rem;
}

.tcard cite small {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 3px;
}

/* --- 16. FAQ ------------------------------------------------------------ */

.faq {
  max-width: 780px;
  margin-inline: auto;
  border-top: 1px solid var(--lav-line);
}

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

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.18rem);
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--violet);
}

.faq__sign {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--lav-line);
  display: grid;
  place-items: center;
  position: relative;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--violet);
  border-radius: 2px;
  transition: opacity 0.2s ease;
}

.faq__sign::before {
  width: 13px;
  height: 2.5px;
}

.faq__sign::after {
  width: 2.5px;
  height: 13px;
}

details[open] .faq__sign {
  background: var(--violet);
  border-color: var(--violet);
  transform: rotate(180deg);
}

details[open] .faq__sign::before {
  background: #fff;
}

details[open] .faq__sign::after {
  opacity: 0;
}

.faq__body {
  padding: 0 4px 26px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.faq__body p + p {
  margin-top: 14px;
}

/* --- 17. Final CTA ------------------------------------------------------ */

.finale {
  background: var(--violet);
  color: #fff;
  text-align: center;
  padding-block: clamp(72px, 10vw, 130px);
  position: relative;
  overflow: hidden;
}

.finale .arc {
  right: -18%;
  bottom: -46%;
  width: min(900px, 120vw);
  opacity: 0.5;
}

.finale > .wrap {
  position: relative;
  z-index: 2;
}

.finale .h2 {
  max-width: 16ch;
  margin-inline: auto;
}

.finale p {
  margin-top: 20px;
  font-size: clamp(1.08rem, 2.2vw, 1.32rem);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 550;
}

.finale .btn {
  margin-top: 38px;
}

.finale .micro {
  color: rgba(255, 255, 255, 0.86);
}

/* --- 18. Footer --------------------------------------------------------- */

.ftr {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(52px, 7vw, 76px) 34px;
  font-size: 0.99rem;
}

.ftr__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 780px) {
  .ftr__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
  }
}

.ftr .logo {
  color: #fff;
  margin-bottom: 16px;
}

.ftr .logo span {
  color: rgba(255, 255, 255, 0.55);
}

.ftr__blurb {
  max-width: 34ch;
  line-height: 1.6;
}

.ftr h2 {
  color: #fff;
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  line-height: 1.2;
}

.ftr li + li {
  margin-top: 11px;
}

.ftr a {
  text-decoration: none;
  transition: color 0.16s ease;
}

.ftr a:hover {
  color: #fff;
}

.wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #04331a;
  font-weight: 800;
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  margin-top: 20px;
  transition: transform 0.16s ease;
}

.wa:hover {
  transform: translateY(-2px);
  color: #04331a;
}

.ftr__base {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --- 19. Inner page shell ----------------------------------------------- */

.pagehead {
  background: var(--lav);
  padding-block: clamp(52px, 7vw, 88px);
  border-bottom: 1px solid var(--lav-line);
  position: relative;
  overflow: hidden;
}

.pagehead .dots {
  top: -30px;
  right: -30px;
  width: 240px;
  height: 190px;
}

.pagehead > .wrap {
  position: relative;
  z-index: 2;
}

.pagehead .lede {
  margin-top: 18px;
  max-width: 52ch;
}

.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 46px;
  margin-bottom: 14px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  color: var(--muted);
  margin-bottom: 16px;
}

.prose ul {
  margin-bottom: 16px;
  display: grid;
  gap: 10px;
}

.prose ul li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
}

.prose strong {
  color: var(--ink);
  font-weight: 800;
}

.callout {
  border-left: 4px solid var(--violet);
  background: var(--lav);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 24px 28px;
  margin-block: 30px;
}

.callout p {
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

/* --- 20. /start conversation shell -------------------------------------- */

.start {
  min-height: calc(100dvh - 76px);
  display: flex;
  align-items: center;
  padding-block: clamp(44px, 6vw, 76px);
  position: relative;
  overflow: hidden;
}

.start .arc {
  top: -30%;
  right: -30%;
  width: min(900px, 110vw);
  opacity: 0.5;
}

.start > .wrap {
  position: relative;
  z-index: 2;
}

.chat {
  max-width: 720px;
  margin-inline: auto;
}

.chat__head {
  margin-bottom: 30px;
}

.chat__intro {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar--sm {
  width: 38px;
  height: 38px;
}

/* Sarah is an assistant and the page says so rather than implying otherwise. */
.chat__who {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.bubble {
  background: var(--lav);
  border-radius: 4px 18px 18px 18px;
  padding: 20px 24px;
  font-size: clamp(1.08rem, 2.1vw, 1.25rem);
  font-weight: 650;
  line-height: 1.45;
}

.chat__thread:empty {
  display: none;
}

.chat__thread {
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}

/* --- conversation turns -------------------------------------------------- */

.turn {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.turn--them {
  flex-direction: row-reverse;
}

.turn__body {
  padding: 14px 18px;
  border-radius: 4px 16px 16px 16px;
  background: var(--lav);
  font-size: 1.02rem;
  line-height: 1.5;
  max-width: 84%;
}

.turn--them .turn__body {
  background: var(--violet);
  color: #fff;
  border-radius: 16px 4px 16px 16px;
}

/* Sarah thinking. Three dots, and nothing that pretends to be a word count. */
.turn__dots {
  display: inline-flex;
  gap: 5px;
  padding: 4px 0;
}

.turn__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: w99blink 1.3s infinite ease-in-out both;
}

.turn__dots i:nth-child(2) { animation-delay: 0.16s; }
.turn__dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes w99blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .turn__dots i { animation: none; opacity: 0.6; }
}

/* Shown once Sarah has everything and the build has started. */
.chat__done {
  background: var(--lav);
  border: 1px solid var(--lav-line);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
}

.chat__done h2 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}

.chat__done p {
  margin: 0 0 6px;
  color: var(--muted);
}

.composer {
  background: #fff;
  border: 2px solid var(--lav-line);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.18s ease;
}

.composer:focus-within {
  border-color: var(--violet);
}

.composer textarea {
  width: 100%;
  border: 0;
  resize: none;
  font: inherit;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  min-height: 128px;
  padding: 4px 6px;
}

.composer textarea:focus {
  outline: none;
}

.composer textarea::placeholder {
  /* these readers are older — the example has to be genuinely readable */
  color: #6b6790;
  opacity: 1;
}

.composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--lav-line);
}

.composer__hint {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.composer .btn {
  width: auto;
  padding: 14px 28px;
  font-size: 1rem;
}

.composer__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.composer__attach {
  appearance: none;
  border: 1px solid var(--lav-line);
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}

.composer__attach:hover {
  background: var(--lav);
}

.composer__files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.composer__files:empty {
  display: none;
}

.composer__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lav);
  border: 1px solid var(--lav-line);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 0.85rem;
  color: var(--ink);
  max-width: 100%;
}

.composer__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.composer__file button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.composer__filesError {
  margin: 8px 0 0;
  font-size: 0.88rem;
  font-weight: 650;
  color: #c0392b;
}

.composer__filesError:empty {
  display: none;
}

.turn__files {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.turn__files li {
  font-size: 0.85rem;
  color: var(--muted);
}

.start__reassure {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--muted);
}

.start__reassure span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.start__reassure svg {
  color: var(--violet);
  flex: none;
}

/* --- 20b. Sticky CTA bar -------------------------------------------------
   Fixed to the bottom of the viewport, appears once the reader has scrolled
   past roughly the halfway point of the page and hides again near the
   footer so it never sits on top of the page's own final CTA. */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.28s ease;
}

.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-cta__bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid var(--lav-line);
  box-shadow: 0 -14px 30px -20px rgba(20, 16, 51, 0.4);
  padding: 14px var(--gut);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.sticky-cta__text {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  min-width: 0;
}

.sticky-cta__text small {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 1px;
}

.sticky-cta .btn {
  width: auto;
  flex: none;
  padding: 13px 26px;
  font-size: 0.97rem;
  white-space: nowrap;
}

/* On a phone the bar is just the button — a label plus sub-label could not
   fit beside it and overflowed the viewport in both directions. */
@media (max-width: 620px) {
  .sticky-cta__bar {
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    gap: 0;
  }

  .sticky-cta__text {
    display: none;
  }

  .sticky-cta .btn {
    width: 100%;
  }
}

/* --- 21. Motion --------------------------------------------------------- */

.js .rise {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js .rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}