/* Canonical Parcyl palette and readable type, shared by both invitation views. */
html[data-variant] {
  --brand-green:#1ed760;
  --green:var(--brand-green);
  --text:#f7f7f7;
  --muted:#d1d1d1;
  /* Exact flat colors sampled from the supplied Parcyl logo. */
  --logo-green-light:#89ea60;
  --logo-green-mid:#5bcc48;
  --logo-green-deep:#1daf29;
  --parcyl-green-gradient:linear-gradient(90deg,var(--logo-green-light) 0%,var(--logo-green-mid) 50%,var(--logo-green-deep) 100%);
}
html[data-variant] body { color:var(--text); }
html[data-variant] .q-section { --q-green:var(--brand-green); }

/* Brand accents use bright green. Body copy uses neutral white. */
html[data-variant] :is(h1 em,h2 em,.closing em,.eyebrow,.lane-number,.destinations>span,.acquisition-steps article>span,.closing>span,.quiet-link>span,.connection-origin>span,.q-pdf-badge,.q-back,.window-clock,.seal-access,.lane-symbol) { color:var(--brand-green)!important; }
html[data-variant] :is(.hero-description,.section-heading>p,.intelligence-heading>p,.acquisition-steps p,.connection-columns p,.q-copy>p,.founder-note p,.founder-offer li,.seal-bottom,.offer-strip p,.invite-window p,.brand-grid span,.api-data li) { color:#f5f5f5!important; }
html[data-variant] :is(.hero-footer,.scene-caption,.invited-by>span:last-child,.invited-by small,.event-name,.event-name>span,.founder-name,.founder-name>span:last-child,.offer-top>span,.offer-price>div,.offer-price s,.offer-strip s,.invite-window p>span,.offer-note,.membership-details,.q-example-label,footer>span,footer>div,.avatar,.door-open-copy>span,.door-open-copy>small) { color:#d6d6d6!important; }
html[data-variant] .founder-offer li::before { color:var(--brand-green); }
html[data-variant] :is(.eyebrow i,.availability i,.api-data li::before) { background:var(--brand-green); }
html[data-variant] .offer-number { color:var(--founder-gold); }
html[data-variant] :is(.header-invite,.quiet-link,.glass,.closing>.quiet-link) { color:#fff; }
html[data-variant] .primary { color:#061b0d!important; background:var(--brand-green); font-size:14px; min-height:50px; }
html[data-variant] .primary:hover { background:#48e67f; }
html[data-variant] .primary span { color:inherit!important; }
html[data-variant] :is(.eyebrow,.lane-number,.destinations>span,.acquisition-steps article>span,.closing>span) { font-size:11px; letter-spacing:1.1px; line-height:1.5; }
html[data-variant] :is(.header-invite,.quiet-link) { font-size:13px; }
html[data-variant] .hero-description { font-size:17px; line-height:1.65; }
html[data-variant] .hero-seal { width:290px; min-width:290px; }
html[data-variant] .seal-label { font-size:18px; }
html[data-variant] .seal-bottom { font-size:15px; line-height:1.65; }
html[data-variant] .seal-bottom b { font-weight:650; }
html[data-variant] .seal-access { font-size:13px; line-height:1.55; }
html[data-variant] .invited-by>span:last-child { font-size:11px; letter-spacing:.8px; }
html[data-variant] .invited-by strong { font-size:14px; }
html[data-variant] .invited-by small { font-size:12px; }
html[data-variant] .hero-footer { font-size:10px; letter-spacing:.7px; }
html[data-variant] .hero-footer i { color:#d6d6d6; }
html[data-variant] .section-heading>p { font-size:16px; }
html[data-variant] .section-heading>p>span { color:#d6d6d6; font-size:13px; }
html[data-variant] .door-copy .eyebrow { font-size:11px; }
html[data-variant] .door-controls .button { font-size:13px!important; min-height:46px; }
html[data-variant] .door-controls .glass span:last-child { font-size:13px; }
html[data-variant] .door-controls .reveal-link { gap:14px!important; }
html[data-variant] .scene-caption { font-size:11px; letter-spacing:.6px; line-height:1.5; }

html[data-variant] .offer-strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:27px; }
html[data-variant] .offer-strip>div { padding:0 22px; }
html[data-variant] .offer-strip>div:first-child { padding-left:0; }
html[data-variant] .offer-strip>div:last-child { padding-right:0; }
html[data-variant] .offer-strip>div>span { color:var(--brand-green); font-size:11px; letter-spacing:.9px; line-height:1.5; }
html[data-variant] .offer-strip p { font-size:15px; line-height:1.6; }
html[data-variant] .offer-strip s { font-size:12px; margin-left:0; }
html[data-variant] :is(.intelligence-heading>p,.acquisition-steps p) { font-size:16px; line-height:1.7; }

/* Glass gives bright text a consistent readable surface over the daylight image. */
html[data-variant] .connections-section .section-heading,
html[data-variant] .connection-origin {
  background:var(--panel-glass); border:1px solid var(--panel-border); border-radius:10px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
html[data-variant] .connections-section .section-heading { padding:30px; align-items:center; }
html[data-variant] .connections-section h2 { color:#fff; }
html[data-variant] .connection-origin { width:fit-content; padding:18px 26px; margin-inline:auto; }
html[data-variant] .connection-origin>span { font-size:11px; letter-spacing:1px; }
html[data-variant] .connection-trunk,
html[data-variant] .connection-branches span { background:var(--brand-green); }
html[data-variant] .connection-branches { border-color:var(--brand-green); }
html[data-variant] .connection-columns p { font-size:15px; min-height:75px; }
html[data-variant] .brand-grid span { font-size:12px; }
html[data-variant] .brand-grid img { width:30px; height:30px; }
html[data-variant] .api-data li { font-size:15px; }
html[data-variant] .connection-end { margin-inline:0; }
html[data-variant] .connection-end span:nth-child(2) { color:var(--brand-green); background:#101512; border-radius:6px; padding:10px 14px; font-size:11px; letter-spacing:.7px; text-align:center; }
html[data-variant] .availability { width:fit-content; max-width:100%; margin-inline:auto; padding:9px 14px; border-radius:6px; background:#101512; color:#f5f5f5; font-size:12px; line-height:1.5; }
html[data-variant] .q-example-label { font-size:11px; letter-spacing:.8px; }
html[data-variant] .q-copy>.quiet-link { font-size:14px; }
html[data-variant] .q-bubble-out { color:#fff; }

html[data-variant] .founder-note p { font-size:16px; line-height:1.75; }
html[data-variant] .founder-name { font-size:12px; letter-spacing:.8px; }
html[data-variant] .founder-name>span:last-child { font-size:11px; }
html[data-variant] .offer-top>span { font-size:11px; letter-spacing:.7px; }
html[data-variant] .founder-offer>.eyebrow { font-size:12px; }
html[data-variant] .founder-offer h3 { font-size:29px; }
html[data-variant] .offer-price>div { font-size:14px; }
html[data-variant] .offer-price s { font-size:13px; }
html[data-variant] .founder-offer li { font-size:15px; line-height:1.6; }
html[data-variant] .membership-details { font-size:13px; line-height:1.7; margin:-9px 0 24px; }
html[data-variant] .invite-window p { font-size:14px; line-height:1.6; }
html[data-variant] .invite-window p>span { font-size:12px; line-height:1.6; }
html[data-variant] .offer-note { font-size:12px; line-height:1.65; }
html[data-variant] :is(footer>span,footer>div) { font-size:11px; line-height:1.6; }
html[data-variant] footer>span { letter-spacing:.5px; }

@media(max-width:1100px) and (min-width:761px) {
  html[data-variant] .hero-seal { min-width:250px; width:250px; padding:24px; }
  html[data-variant] .hero-content { max-width:calc(100% - 280px); }
  html[data-variant] .hero-content h1 { font-size:58px; }
  html[data-variant] .offer-strip { grid-template-columns:1fr 1fr; gap:24px; }
  html[data-variant] .offer-strip>div { border:0; padding:0; }
  html[data-variant] .connection-columns h3 { font-size:22px; }
  html[data-variant] .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-variant] .founder-layout { gap:28px; }
}
@media(max-width:760px) {
  html[data-variant] .hero-intro { padding-top:30px; }
  html[data-variant] .hero-description { font-size:16px; line-height:1.6; }
  html[data-variant] .hero-seal { width:100%; min-width:0; grid-template-columns:106px minmax(0,1fr); gap:15px; padding:20px 16px; margin-top:20px; }
  html[data-variant] .hero-seal>strong { font-size:72px; }
  html[data-variant] .seal-details { padding-left:15px; }
  html[data-variant] .seal-label { font-size:16px; line-height:1.35; }
  html[data-variant] .seal-bottom { font-size:13px; line-height:1.65; margin-top:8px; }
  html[data-variant] .seal-access { font-size:12px; margin-top:7px; }
  html[data-variant] .hero-buttons { display:grid; grid-template-columns:1fr; gap:3px; margin-top:18px; }
  html[data-variant] .hero-buttons .primary { width:100%; justify-content:center; gap:20px; font-size:15px; }
  html[data-variant] .hero-buttons .quiet-link { justify-self:center; border:0; min-height:44px; font-size:13px; }
  html[data-variant] .invited-by { margin-top:9px; }
  html[data-variant] .invited-by small { display:block; margin:3px 0 0; font-size:12px; }
  html[data-variant] .hero-footer { display:none; }
  html[data-variant] .door-copy { top:auto; bottom:82px; }
  html[data-variant] .door-controls { gap:12px; }
  html[data-variant] .door-controls .button { padding-inline:12px; gap:10px; }
  html[data-variant] .scene-caption { display:block; font-size:11px; }
  html[data-variant] .scene-caption>span { display:block; text-align:left; margin-top:4px; }
  html[data-variant] .offer-strip { grid-template-columns:1fr 1fr; gap:24px 19px; padding:22px; }
  html[data-variant] .offer-strip>div { display:block; border:0; padding:0; }
  html[data-variant] .offer-strip>div>span { max-width:none; display:block; font-size:11px; line-height:1.5; letter-spacing:.6px; }
  html[data-variant] .offer-strip p { text-align:left; font-size:14px; margin-top:8px; }
  html[data-variant] .offer-strip strong { font-size:28px; }
  html[data-variant] .intelligence-heading h2 { font-size:36px; }
  html[data-variant] :is(.intelligence-heading>p,.acquisition-steps p) { font-size:15px; }
  html[data-variant] .connections-section .section-heading { padding:24px; }
  html[data-variant] .connections-section .section-heading>p { font-size:15px; }
  html[data-variant] .connection-columns article { padding:23px; }
  html[data-variant] .connection-columns h3 { font-size:22px; }
  html[data-variant] .connection-columns p { min-height:0; font-size:15px; }
  html[data-variant] .destinations>span { font-size:11px; letter-spacing:.6px; }
  html[data-variant] .brand-grid { column-gap:8px; }
  html[data-variant] .brand-grid span { font-size:11px; }
  html[data-variant] .availability { font-size:11px; }
  html[data-variant] .founder-note h2 { font-size:35px; }
  html[data-variant] .founder-note p { font-size:16px; }
  html[data-variant] footer>span { max-width:190px; font-size:11px; }
  html[data-variant] footer>div { font-size:12px; }
}
@media(max-width:360px) {
  html[data-variant] .hero-seal { grid-template-columns:90px minmax(0,1fr); gap:10px; padding:17px 13px; }
  html[data-variant] .hero-seal>strong { font-size:62px; }
  html[data-variant] .seal-details { padding-left:10px; }
  html[data-variant] .seal-label { font-size:15px; }
  html[data-variant] .seal-bottom { font-size:12px; }
  html[data-variant] .seal-access { font-size:11px; }
  html[data-variant] .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-variant] .connection-columns article { padding:20px; }
  html[data-variant] .door-controls .button { font-size:12px!important; padding-inline:10px; }
  html[data-variant] .door-controls .glass span:last-child { font-size:12px; }
}

html[data-variant] .avatar { font-size:11px; }

/* White section labels, muted supporting labels, and selective membership gold. */
html[data-variant] body :is(
  .eyebrow,
  .connection-origin>span,
  .q-pdf-badge,
  .founder-name>span:first-child,
  .closing>span
) { color:#e4e9e6!important; }
html[data-variant] body :is(
  .event-name,
  .event-name>span,
  .avatar,
  .invited-by>span:last-child,
  .hero-footer,
  .hero-footer span,
  .hero-footer i,
  .door-open-copy>span,
  .door-open-copy>small,
  .scene-caption>span,
  .lane-number,
  .destinations>span,
  .connection-end span:nth-child(2),
  .q-example-label,
  .founder-name>span:last-child,
  .offer-top>span,
  footer>span
) { color:#c4ccc8!important; }
html[data-variant] body :is(
  .door-section>.section-heading .eyebrow,
  .founder-offer>.eyebrow
) { color:var(--founder-gold)!important; }

/* The same left-to-right brand gradient connects the key invitation actions. */
html[data-variant] .primary,
html[data-variant] .primary:hover {
  background:var(--parcyl-green-gradient);
  color:#061b0d!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 16%),0 6px 22px rgb(29 175 41 / 12%);
}
html[data-variant] .primary:hover {
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 23%),0 7px 28px rgb(29 175 41 / 23%);
}
html[data-variant] .q-bubble-out {
  /* A consistent shade keeps the requested white message legible at every stop. */
  background:linear-gradient(rgb(0 0 0 / 45%),rgb(0 0 0 / 45%)),var(--parcyl-green-gradient);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgb(137 234 96 / 28%);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  html[data-variant] .closing em {
    display:inline-block;
    background:var(--parcyl-green-gradient);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent!important;
    -webkit-text-fill-color:transparent;
  }
}

/* Frame the mobile architecture independently of the long stack of workflow cards. */
@media(max-width:760px) {
  html[data-variant=dusk] .connections-section { background:#0e1512; border-color:var(--line); }
  html[data-variant=dusk] .connections-section::before {
    top:70px;
    bottom:auto;
    height:auto;
    aspect-ratio:2 / 3;
    background:url('assets/workflow-mobile-supported.webp') center top / 100% 100% no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 98%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 8%,#000 98%,transparent);
  }
  html[data-variant=dusk] .connections-section::after { background:none; }
  html[data-variant=dusk] .workflow-intro { min-height:calc(150vw + 27px); }
  html[data-variant=dusk] .connections-section .section-heading { margin-bottom:0; }
  html[data-variant=dusk] .connection-map { margin-top:27px; }
}

/* Membership prices and workflow steps share a clear gold / green hierarchy. */
html[data-variant] .founding-price { color:var(--founder-gold); white-space:nowrap; }
html[data-variant] .billing-unit { display:block; white-space:nowrap; }
html[data-variant] .seal-lock { display:block; color:var(--brand-green); }
html[data-variant] .offer-strip>div>span { color:var(--brand-green); }
html[data-variant] .benefit-price .founding-price { display:block; line-height:1.2; margin-bottom:3px; }
html[data-variant] .benefit-price s { display:block; white-space:nowrap; margin-top:3px; }
html[data-variant] .acquisition-steps .step-label { display:inline-flex; gap:6px; align-items:baseline; white-space:nowrap; }
html[data-variant] .step-number { color:var(--founder-gold); }
html[data-variant] .step-divider { color:#a8b4ad; }
html[data-variant] .step-name { color:var(--brand-green); }
@media(max-width:760px) {
  html[data-variant] .offer-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-variant] .offer-strip>div { min-width:0; }
  html[data-variant] .offer-price { flex-direction:column; align-items:flex-start; gap:4px; }
  html[data-variant] .offer-price>div { gap:5px; }
}
@media(max-width:360px) {
  html[data-variant] .offer-strip { padding:18px; gap:24px 16px; }
}