/* EventFlow landing v2 (draft, separate from the app). Brand: ink, teal, lemon, magenta, mist. */
:root {
  --ink: #082d24;
  --black: #0b0b0b;
  --teal: #1899a1;
  --lemon: #f9f871;
  --magenta: #a73e68;
  --mist: #eef9f5;
  --muted: #5d6f66;
  --line: #dfe5e1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: #fff; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--black); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 32px; width: auto; }
.nav { display: flex; align-items: center; gap: 22px; font-weight: 700; font-size: .92rem; }
.nav a { color: #fff; text-decoration: none; }
.nav a:hover { color: var(--lemon); }
/* Short label of the demo button, used on phones only. */
.t-short { display: none; }
/* Phone: the logo on the first line, the menu on the second (all links stay available). */
@media (max-width: 760px) {
  .site-header .wrap { height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .nav { width: 100%; justify-content: space-between; gap: 10px; font-size: .88rem; }
  .nav .button.small { padding: 9px 14px; font-size: .82rem; }
  .nav a { white-space: nowrap; }
  .t-long { display: none; }
  .t-short { display: inline; }
}

/* Buttons (colour inversion on hover, like the app) */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border: 2px solid var(--teal); border-radius: 10px; background: var(--teal); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer; transition: .15s; }
.button:hover { background: #fff; color: var(--teal); }
.button.lemon { background: var(--lemon); border-color: var(--lemon); color: var(--black); }
.button.lemon:hover { background: transparent; color: var(--lemon); }
.button.ghost { background: transparent; border-color: #fff; color: #fff; }
.button.ghost:hover { background: #fff; color: var(--black); }
.button.small { padding: 9px 18px; font-size: .9rem; }

/* Hero (text only, centred) */
.hero { position: relative; background: var(--black); color: #fff; padding: 96px 0 104px; overflow: hidden; text-align: center; }
.hero .wrap { position: relative; z-index: 1; }
.eyebrow { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--magenta); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 0 auto 22px; line-height: 1; }
.hero h1 .h1-top { display: block; margin-bottom: 10px; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.01em; }
/* The key phrase: much bigger, one line, in the poster font. */
.hero h1 em { display: block; font-family: 'Anton', Impact, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; color: var(--lemon); white-space: nowrap; font-size: clamp(2.6rem, 10.5vw, 8.6rem); line-height: .95; letter-spacing: .01em; }
.hero p.lead { margin: 0 auto 32px; max-width: 34em; font-size: 1.25rem; color: #d7dedb; }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero .fine { margin: 18px 0 0; font-size: .92rem; color: #9fb0a9; }
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.hero .b1 { width: 300px; height: 300px; background: var(--lemon); top: -170px; right: -110px; opacity: .95; }
.hero .b2 { width: 230px; height: 230px; background: var(--magenta); bottom: -90px; left: -60px; }
.hero .b3 { width: 90px; height: 90px; background: var(--teal); top: 56%; left: 3%; opacity: .9; }
@media (max-width: 1100px) { .hero .b3 { display: none; } }

/* Made for: scrolling pills */
.madefor { padding: 34px 0 40px; background: #fff; border-bottom: 1px solid var(--line); text-align: center; }
.madefor .kicker { margin-bottom: 16px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: scroll 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(calc(-50% - 7px)); } }
.pill { flex: none; padding: 14px 26px; border: 2px solid var(--black); border-radius: 999px; background: var(--black); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; transition: .15s; }
.pill:nth-child(4n+2) { background: var(--teal); border-color: var(--teal); }
.pill:nth-child(4n+3) { background: var(--magenta); border-color: var(--magenta); }
.pill:nth-child(4n) { background: var(--lemon); border-color: var(--lemon); color: var(--black); }
.pill:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .pill[aria-hidden] { display: none; } }

/* Demo */
.demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto 22px; }
/* Same colours as the scrolling pills: black, teal, magenta, yellow. The selected one has a ring. */
.demo-tab { padding: 13px 28px; border: 2px solid var(--black); border-radius: 999px; background: var(--black); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: .15s; }
.demo-tab:nth-child(4n+2) { background: var(--teal); border-color: var(--teal); }
.demo-tab:nth-child(4n+3) { background: var(--magenta); border-color: var(--magenta); }
.demo-tab:nth-child(4n) { background: var(--lemon); border-color: var(--lemon); color: var(--black); }
.demo-tab:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.demo-tab.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--black); }
.browser { max-width: 1040px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: var(--black); border: 1px solid var(--black); box-shadow: 0 26px 70px rgba(0, 0, 0, .28); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--black); }
.browser-bar .dot { width: 12px; height: 12px; border-radius: 50%; background: #d4d9d7; }
.browser-bar .dot:nth-child(1) { background: #ff6159; }
.browser-bar .dot:nth-child(2) { background: #ffbd2e; }
.browser-bar .dot:nth-child(3) { background: #27c93f; }
.browser-bar .url { margin-left: 10px; flex: 1; padding: 5px 14px; border-radius: 999px; background: #262626; color: #cfd6d3; font-size: .85rem; }
/* The demo is the live site: it takes a few seconds to appear, so a message shows behind the frame. */
.demo-body { position: relative; background: var(--mist); }
.demo-body::before { content: 'Loading the demo…'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.demo-frame { position: relative; display: block; width: 100%; height: 1040px; border: 0; background: transparent; }
/* The venue home page is about 1015px tall on a computer and gets taller as the screen narrows. */
@media (max-width: 900px) { .demo-frame { height: 1250px; } }
@media (max-width: 600px) { .demo-frame { height: 1500px; } }

/* What you get: pills that open a detailed page */
.gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.get { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 2px solid var(--black); border-radius: 999px; background: #fff; font-weight: 700; font-size: 1.08rem; text-decoration: none; transition: .15s; }
.get .ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--lemon); font-size: 1.25rem; }
.get .arrow { margin-left: auto; color: var(--magenta); font-size: 1.4rem; transition: .15s; }
.get:hover { background: var(--black); color: #fff; transform: translateY(-2px); }
.get:hover .arrow { color: var(--lemon); transform: translateX(4px); }
@media (max-width: 900px) { .gets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gets { grid-template-columns: 1fr; } }
.center { margin: 40px 0 0; text-align: center; }

/* Sections */
section.block { padding: 84px 0; }
section.block.mist { background: var(--mist); }
section.block.dark { background: var(--black); color: #fff; }
section.block.dark h2 { color: #fff; }
section.block.dark .sub { color: #aeb9b5; }
section.block.dark .step { background: #161616; border-color: #2c2c2c; }
section.block.dark .step h3 { color: #fff; }
section.block.dark .step p { color: #aeb9b5; }
.kicker { margin: 0 0 8px; color: var(--magenta); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em; }
.sub { margin: 0 0 40px; max-width: 40em; font-size: 1.12rem; color: var(--muted); }
.sub.wide { max-width: none; }

/* Problem / solution */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vs .card { padding: 28px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.vs .card.bad { background: #fafafa; }
.vs .card.good { border: 2px solid var(--teal); }
.vs h3 { margin: 0 0 14px; font-size: 1.2rem; }
.vs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vs li { padding-left: 28px; position: relative; }
.vs .bad li::before { content: '✕'; position: absolute; left: 0; color: #b0021e; font-weight: 700; }
.vs .good li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
@media (max-width: 800px) { .vs { grid-template-columns: 1fr; } }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); border-bottom: 5px solid var(--lemon); }
.feature .ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: var(--lemon); font-size: 1.5rem; }
.feature h3 { margin: 0 0 8px; font-size: 1.15rem; }
.feature p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.step .num { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--lemon); color: var(--black); font-weight: 700; font-size: 1.1rem; }
.step h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.step p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Made for */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span { padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; }
.chips span:nth-child(even) { background: var(--teal); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.plan { padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.plan.featured { border: 2px solid var(--teal); box-shadow: 0 18px 50px rgba(24, 153, 161, .18); }
.plan h3 { margin: 0 0 6px; letter-spacing: .08em; }
.plan .price { margin: 0 0 16px; font-size: 2.2rem; font-weight: 700; }
.plan .price small { font-size: 1rem; font-weight: 400; color: var(--muted); }
.plan ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.plan li { padding-left: 24px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.note { margin: 22px 0 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* Final CTA */
.final { background: var(--black); color: #fff; text-align: center; padding: 84px 0; position: relative; overflow: hidden; }
.final h2 { color: #fff; }
.final p { margin: 0 auto 28px; max-width: 34em; color: #d7dedb; font-size: 1.15rem; }

/* Footer */
/* Two rows: the links first, the copyright last. The host's "Powered by" badge sits at the bottom right,
   so the links are kept out of that corner and the footer has room below. */
footer { background: #000; color: #9fb0a9; padding: 30px 0 64px; font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; }
footer .foot-links { padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid #222; font-weight: 700; }
footer .foot-links a { text-decoration: none; color: #d7dedb; }
footer a:hover { color: var(--lemon); }
footer .foot-copy { font-size: .88rem; }

/* What we do / don't (short version) */
.does { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.do { display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-bottom: 5px solid var(--lemon); }
.do .ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 14px; background: var(--lemon); font-size: 1.4rem; }
.do strong { font-size: 1.08rem; }
.do span:last-child { color: var(--muted); font-size: .96rem; }
.dont { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; padding: 20px 24px; border-radius: 18px; background: var(--black); color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center; }
.dont .x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--magenta); color: #fff; font-size: 1rem; }
@media (max-width: 960px) { .does { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .does { grid-template-columns: 1fr; } }

.dont a { color: var(--lemon); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.dont a:hover { color: #fff; }

/* What you get: 3 portrait cards */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 980px; margin: 36px auto 0; }
.benefit { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(8, 45, 36, .08); transition: .18s; }
.benefit:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(8, 45, 36, .16); }
/* The visual area is where a screenshot or a video goes later. */
.b-visual { display: grid; place-items: center; aspect-ratio: 4 / 3; font-size: 4.2rem; }
.b-visual.b1 { background: var(--lemon); }
.b-visual.b2 { background: var(--teal); }
.b-visual.b3 { background: var(--magenta); }
.b-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.b-body h3 { margin: 0 0 8px; font-size: 1.35rem; }
.b-body p { margin: 0 0 20px; color: var(--muted); }
.b-link { margin-top: auto; font-weight: 700; color: var(--black); text-decoration: none; }
.b-link span { display: inline-block; color: var(--magenta); transition: .15s; }
.b-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.b-link:hover span { transform: translateX(4px); }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; max-width: 420px; } }

/* Pricing page */
.page-hero { position: relative; background: var(--black); color: #fff; padding: 72px 0 64px; overflow: hidden; text-align: center; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { margin: 0 0 14px; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; }
.page-hero h1 em { font-style: normal; color: var(--lemon); }
.page-hero .lead { margin: 0 auto 28px; max-width: 34em; font-size: 1.2rem; color: #d7dedb; }
.page-hero .b1 { width: 260px; height: 260px; background: var(--lemon); top: -130px; right: -70px; }
.page-hero .b2 { width: 170px; height: 170px; background: var(--magenta); bottom: -80px; left: -40px; }
.billing { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: #1b1b1b; }
.bill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border: 0; border-radius: 999px; background: transparent; color: #d7dedb; font: inherit; font-weight: 700; cursor: pointer; transition: .15s; }
.bill.is-on { background: var(--lemon); color: var(--black); }
.bill:not(.is-on):hover { background: #333; color: var(--lemon); }
.bill .save { padding: 3px 9px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: .72rem; letter-spacing: .02em; }
.plans-block { padding-top: 56px; }
.plans { align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan ul { flex: 1; align-content: start; }
.plan .annual { min-height: 1.4em; margin: -10px 0 14px; color: var(--muted); font-size: .92rem; }
.plan .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.center-note { text-align: center; }
.center-note a { color: var(--teal); font-weight: 700; }
.narrow { max-width: 760px; }
.faq { display: grid; gap: 12px; margin-top: 26px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.faq summary { padding: 18px 22px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--magenta); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0; padding: 0 22px 20px; color: var(--muted); }

.faq p a { color: var(--teal); font-weight: 700; }

/* Feature detail pages */
.video-frame { max-width: 980px; }
.video-frame video { display: block; width: 100%; background: #000; }
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 34px; max-width: 980px; margin-left: auto; margin-right: auto; }
.way { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(8, 45, 36, .08); }
/* Where a screenshot goes. */
.way-shot { display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, #f3f6f5, #f3f6f5 12px, #e9eeec 12px, #e9eeec 24px); color: #8a9a93; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.way-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.way-body .num { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 50%; background: var(--lemon); color: var(--black); font-weight: 700; }
.way-body h3 { margin: 0 0 8px; font-size: 1.25rem; }
.way-body p { margin: 0 0 16px; color: var(--muted); }
.way-body .b-link { margin-top: auto; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; max-width: 460px; } }

.way-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.way-shot { overflow: hidden; }

/* Screenshot under the text */
.way-body { order: 1; }
.way-shot { order: 2; border-top: 1px solid var(--line); }

.ways.three { grid-template-columns: repeat(3, 1fr); max-width: 1120px; }
@media (max-width: 900px) { .ways.three { grid-template-columns: 1fr; max-width: 460px; } }

/* A tall picture (poster) shown whole */
.way-shot.contain { background: var(--mist); }
.way-shot.contain img { object-fit: contain; object-position: center; }

.way-shot video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Detail pages: one big row per card (text on one side, the whole picture on the other) */
.ways.rows { grid-template-columns: 1fr; max-width: 1080px; gap: 30px; }
.ways.rows .way { flex-direction: row; align-items: stretch; }
.ways.rows .way-body { order: 1; flex: 0 0 34%; justify-content: center; padding: 34px 36px; }
.ways.rows .way-body h3 { font-size: 1.5rem; }
.ways.rows .way-body p { font-size: 1.08rem; }
.ways.rows .way-shot { order: 2; flex: 1; aspect-ratio: auto; border-top: 0; border-left: 1px solid var(--line); background: var(--mist); display: flex; align-items: center; justify-content: center; padding: 22px; }
.ways.rows .way-shot img, .ways.rows .way-shot video { width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 10px; }
.ways.rows .way:nth-child(even) .way-body { order: 2; }
.ways.rows .way:nth-child(even) .way-shot { order: 1; border-left: 0; border-right: 1px solid var(--line); }
@media (max-width: 860px) {
  .ways.rows { max-width: 560px; }
  .ways.rows .way { flex-direction: column; }
  .ways.rows .way-body { flex: none; padding: 24px; }
  .ways.rows .way-body, .ways.rows .way:nth-child(even) .way-body { order: 1; }
  .ways.rows .way-shot, .ways.rows .way:nth-child(even) .way-shot { order: 2; border: 0; border-top: 1px solid var(--line); padding: 14px; }
}

/* Contact page */
.contact-block { padding-top: 56px; }
.form-card { max-width: 760px; margin: 0 auto; padding: 36px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(8, 45, 36, .1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field label { margin-bottom: 7px; font-size: .92rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid #d3dbd7; border-radius: 8px; background: #fff; font: inherit; font-size: 1rem; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); }
.form-card .button { width: 100%; margin-top: 4px; }
.button.lemon-solid { background: var(--black); border-color: var(--black); color: var(--lemon); }
.button.lemon-solid:hover { background: var(--lemon); border-color: var(--lemon); color: var(--black); }
.form-note { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: .88rem; }
.form-note a, .mail-line a { color: var(--teal); font-weight: 700; }
.form-status { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #d7f2e6; color: #0a6b43; font-weight: 700; }
.form-status.is-error { background: #fbe3e7; color: #b0021e; }
.mail-line { margin: 22px 0 0; text-align: center; color: var(--muted); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; gap: 0; } .form-card { padding: 24px; } }

.narrow-card { max-width: 620px; }

/* Integrations page */
.int-block { padding-top: 56px; }
.int-card { max-width: 860px; margin: 0 auto 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(8, 45, 36, .1); }
.int-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 36px; cursor: pointer; list-style: none; }
.int-head::-webkit-details-marker { display: none; }
.int-title h2, .int-title p { display: block; }
.int-caret { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--lemon); transition: .15s; }
.int-caret::before, .int-caret::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px; margin: -1.5px 0 0 -8px; border-radius: 2px; background: var(--black); transition: .15s; }
.int-caret::after { transform: rotate(90deg); }
.int-card[open] .int-caret::after { transform: rotate(0); }
.int-head:hover .int-caret { background: var(--black); }
.int-head:hover .int-caret::before, .int-head:hover .int-caret::after { background: var(--lemon); }
.int-body { padding: 4px 36px 36px; border-top: 1px solid var(--line); padding-top: 28px; }
.int-head h2 { margin: 0 0 8px; font-size: 2rem; }
.int-head p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.int-sec { margin-bottom: 30px; }
.int-sec h3 { margin: 0 0 12px; font-size: 1.25rem; }
.int-sec p { margin: 0 0 12px; color: var(--muted); }
.int-sec a, .int-note a { color: var(--teal); font-weight: 700; }
.int-list { margin: 0 0 4px; padding: 0; list-style: none; counter-reset: i; display: grid; gap: 12px; }
.int-list li { position: relative; padding-left: 46px; counter-increment: i; color: var(--muted); }
.int-list li strong { color: var(--ink); }
.int-list li::before { content: counter(i); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lemon); color: var(--black); font-weight: 700; }
.int-note { margin: 8px 0 0; padding: 16px 18px; border-radius: 12px; background: #f4f7f6; color: var(--muted); font-size: .92rem; }
@media (max-width: 640px) { .int-head { padding: 20px; } .int-body { padding: 22px 20px 26px; } }

/* Legal / privacy page */
.legal-block { padding-top: 56px; }
.legal-content { max-width: 860px; margin: 0 auto; padding: 40px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(8, 45, 36, .1); }
.legal-content section { margin-bottom: 30px; padding-bottom: 6px; }
.legal-content section:last-child { margin-bottom: 0; }
.legal-content h2 { margin: 0 0 12px; font-size: 1.45rem; color: var(--ink); }
.legal-content h2::before { content: ''; display: block; width: 36px; height: 5px; margin-bottom: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--lemon) 0 60%, var(--magenta) 60% 100%); }
.legal-content h3 { margin: 18px 0 8px; font-size: 1.1rem; }
.legal-content p, .legal-content li { color: #3f504a; }
.legal-content p { margin: 0 0 12px; }
.legal-content ul, .legal-content ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.legal-content a { color: var(--teal); font-weight: 700; }
.legal-content strong { color: var(--ink); }
@media (max-width: 640px) { .legal-content { padding: 22px; } }
.confirmed-hero { padding: 110px 0 120px; }