/* Québec landing page visual system. All rules are scoped to this page. */
.quebec-landing { overflow: hidden; background: var(--color-background); }
.quebec-landing.site-main { padding-block: 0; }
.quebec-landing h1, .quebec-landing h2, .quebec-landing h3 { text-wrap: balance; }
.quebec-landing .container { width: min(100% - 2rem, 76rem); }
.quebec-landing .home-section { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.quebec-landing .section-heading { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.quebec-landing .section-heading > p:last-child { max-width: 48rem; }

/* Hero */
.quebec-hero, .quebec-dark-section, .quebec-final-cta { background: var(--color-brand-ink); color: #fff; }
.quebec-hero { padding-block: clamp(4.5rem, 9vw, 8rem); }
.quebec-hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.quebec-hero h1 { max-width: 44rem; color: #fff; }
.quebec-hero__lede { max-width: 42rem; color: rgba(255,255,255,.88); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.quebec-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.button--outline-light { border: 1px solid rgba(255,255,255,.65); background: transparent; color: #fff; }
.button--outline-light:hover,.button--outline-light:focus-visible { background:#fff; color:var(--color-brand-ink); }
.quebec-hero__microcopy { margin-top: 1rem; color: rgba(255,255,255,.72); font-size: .9rem; }
.quebec-hero__visual { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 2rem; background: var(--color-brand-ink-soft); box-shadow: 0 1.75rem 4rem rgba(0,0,0,.25); }
.quebec-hero__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; }

/* Pricing */
.quebec-plans { background: var(--color-background); }
.quebec-plans .plan-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); align-items: stretch; }
.quebec-plans .plan-card { min-height: 100%; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 .65rem 1.8rem rgba(7,17,31,.06); }
.quebec-landing .plan-grid > article + article,
.quebec-landing .why-choose-grid > article + article,
.quebec-landing .device-grid > article + article,
.quebec-landing .quebec-content-grid > article + article { margin-top: 0; padding-top: inherit; border-top: 0; }
.quebec-landing .plan-grid > article + article { padding-top: clamp(1.5rem, 3vw, 2rem); }
.quebec-landing .why-choose-grid > article + article { padding-top: clamp(1.4rem, 3vw, 1.8rem); }
.quebec-landing .device-grid > article + article { padding-top: clamp(1.4rem, 3vw, 1.8rem); }
.quebec-landing .quebec-content-grid > article + article { padding-top: 1.5rem; }
.quebec-plans .plan-card--popular { position: relative; border: 3px solid var(--color-action); background: var(--color-brand-orange); color: var(--color-brand-ink); box-shadow: 0 1.1rem 2.8rem rgba(180,65,9,.2); transform: translateY(-.35rem); }
.quebec-plans .plan-card--popular::before { display: none; }
.quebec-plans .plan-grid > article:nth-child(2) { border-color: #c8d1da; box-shadow: 0 .8rem 2.1rem rgba(7,17,31,.1); }
.quebec-plans .plan-card h3 { color: var(--color-brand-ink); }
.quebec-plans .plan-card--popular h3,
.quebec-plans .plan-card--popular .plan-card__current-price { color: #fff; }
.quebec-plans .plan-card__label { display: inline-flex; width: fit-content; min-width: 5.9rem; min-height: 2rem; max-width: max-content; align-items: center; justify-content: center; padding: .3rem .7rem; border-radius: 999px; background: var(--color-brand-orange); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.2; text-align: center; }
.quebec-plans .plan-card--popular .plan-card__label { background: var(--color-brand-ink); color: #fff; }
.quebec-plans .plan-card--popular .plan-card__price { border-color: rgba(7,17,31,.32); }
.quebec-plans .plan-card--popular .plan-card__features { color: #fff; }
.quebec-plans .plan-card--popular .plan-card__features li { line-height: 1.55; }
.quebec-plans .plan-card--popular .plan-card__features li + li { margin-top: .75rem; }
.quebec-plans .plan-card--popular .plan-card__features li::before { color: var(--color-brand-orange); }
.quebec-plans .plan-card__cta { width: 100%; min-height: 3rem; margin-top: auto; justify-content: center; border-color: var(--color-brand-orange); background: var(--color-brand-orange); color: #fff; text-align: center; }
.quebec-plans .plan-card__cta:hover { border-color: var(--color-brand-ink); background: var(--color-brand-ink); color: #fff; }
.quebec-plans .plan-card--popular .plan-card__cta { border-color: #fff; background: #fff; color: var(--color-brand-ink); }
.quebec-plans .plan-card--popular .plan-card__cta:hover { border-color: #f2f4f6; background: #f2f4f6; color: var(--color-brand-ink); }
.quebec-plans .plan-card__features { flex: 1; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.quebec-plans .plan-card__features li { position: relative; padding-left: 1.5rem; line-height: 1.45; }
.quebec-plans .plan-card__features li + li { margin-top: .65rem; }
.quebec-plans .plan-card__features li::before { position: absolute; top: .05rem; left: 0; color: var(--color-brand-orange); content: '\2713'; font-weight: 700; }
.quebec-plans .plan-card--popular .plan-card__features li::before { color: #fff; }

/* Why / devices / choice cards */
.quebec-light-section, .quebec-devices, .quebec-choice, .quebec-faq { background: var(--color-surface); }
.quebec-light-section .why-choose-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.5rem); align-items: stretch; }
.quebec-light-section .why-choose-card { display: flex; height: 100%; min-height: 14rem; flex-direction: column; padding: clamp(1.6rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: 1.25rem; background: #fff; box-shadow: 0 .45rem 1.3rem rgba(7,17,31,.045); }
.quebec-light-section .why-choose-card__icon { width: 2.8rem; height: 2.8rem; margin-bottom: 1.25rem; border: 1px solid rgba(242,102,34,.18); background: rgba(242,102,34,.08); color: var(--color-brand-orange); }
.quebec-light-section .why-choose-card__icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.quebec-light-section .why-choose-card h3 { margin-bottom: .6rem; color: var(--color-brand-ink); font-weight: 700; }
.quebec-light-section .why-choose-card p { margin: 0; color: var(--color-muted); }
.quebec-devices .device-grid { display: grid; gap: 1rem; }
.quebec-devices .device-card { position: relative; height: 100%; min-height: 13rem; padding: clamp(1.4rem, 3vw, 1.8rem); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.quebec-devices .device-card__icon { display: block; position: relative; width: 2.9rem; height: 2.3rem; margin-bottom: 1.35rem; border: 2px solid var(--color-brand-orange); border-radius: .45rem; }
.quebec-devices .device-card__icon::after { position: absolute; right: 25%; bottom: -.48rem; left: 25%; height: 2px; background: var(--color-brand-orange); content: ''; }
.quebec-devices .device-card__icon--phone { width: 1.7rem; height: 2.9rem; border-radius: .45rem; }
.quebec-devices .device-card__icon--stick { width: 2.7rem; height: 1.25rem; margin-top: .8rem; border-radius: 999px; transform: rotate(-18deg); }
.quebec-devices .device-card h3 { margin-bottom: .55rem; }
.quebec-devices .device-card p { margin: 0; color: var(--color-muted); }
.quebec-devices .device-card a { color: var(--color-brand-ink); font-weight: 700; }
.quebec-devices .device-card:hover { border-color: rgba(242,102,34,.55); box-shadow: 0 1rem 2.5rem rgba(7,17,31,.1); transform: translateY(-3px); }
.quebec-centered-link { margin: 2rem 0 0; text-align: center; }

/* Content categories */
.quebec-content-section { background: var(--color-brand-ink); color: #fff; }
.quebec-content-section h2,.quebec-content-section .section-heading > p:last-child { color: #fff; }
.quebec-content-grid { display: grid; gap: 1.4rem; }
.quebec-content-card { position: relative; min-height: 28rem; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); background: #102943; }
.quebec-content-card__media,.quebec-content-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quebec-content-card__media img { display: block; }
.quebec-content-card__media::after { position: absolute; inset: 0; content: ''; background: linear-gradient(to top, rgba(3,10,24,.82) 0%, rgba(3,10,24,.55) 32%, rgba(3,10,24,.08) 68%, transparent 100%); }
.quebec-content-card__body { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; min-height: 31%; flex-direction: column; justify-content: flex-end; padding: 1.35rem 1.5rem 1.45rem; isolation: isolate; overflow: hidden; }
.quebec-content-card__body::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgba(3,10,24,.5), rgba(3,10,24,.08)); content: ''; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.quebec-content-card h3 { margin: 0 0 .55rem; color: #fff; font-size: var(--font-size-h3); line-height: 1.2; }
.quebec-content-card p { display: -webkit-box; overflow: hidden; margin: 0; color: rgba(255,255,255,.9); font-size: clamp(.9375rem, .9rem + .1vw, 1rem); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* How it works */
.quebec-dark-section .section-heading { margin-bottom: 2.5rem; }
.quebec-dark-section .process-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.quebec-dark-section .process-list > li { display: block; height: 100%; padding: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); background: var(--color-brand-ink-soft); }
.quebec-dark-section .process-list > li > span { display: inline-flex; width: 3rem; height: 3rem; margin-bottom: 1.4rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-brand-orange); color: var(--color-brand-ink); font-weight: 700; }
.quebec-dark-section .process-list h3 { margin: 0 0 .55rem; color: #fff; }
.quebec-dark-section .process-list p { margin: 0; color: rgba(255,255,255,.78); }

/* Choice, context, FAQ and CTA */
.quebec-choice-list { display: grid; gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.quebec-choice-list li { height: 100%; padding: 1.5rem 1.6rem; border-left: .25rem solid var(--color-brand-orange); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.quebec-choice-list h3 { margin-bottom: .4rem; }
.quebec-choice-list p { margin: 0; }
.quebec-context { background: var(--color-background); }
.quebec-context__grid { display: grid; gap: 2.5rem; align-items: center; }
.quebec-context__grid > div:first-child { max-width: 42rem; }
.quebec-context__visual { position: relative; min-height: 19rem; overflow: hidden; border: 1px solid rgba(7,17,31,.1); border-radius: 2rem; background: radial-gradient(circle at 30% 35%, rgba(242,102,34,.22), transparent 24%), linear-gradient(145deg, #eef3f7, #d8e2eb); }
.quebec-context__visual::before { position: absolute; width: 13rem; height: 13rem; top: 15%; left: 20%; border: 1px solid rgba(7,17,31,.18); border-radius: 42% 58% 55% 45%; content: ''; transform: rotate(28deg); }
.quebec-context__visual span, .quebec-context__visual i, .quebec-context__visual b { position: absolute; display: block; border-radius: 1rem; background: #fff; box-shadow: 0 .8rem 1.6rem rgba(7,17,31,.12); }
.quebec-context__visual span { width: 8.5rem; height: 5.5rem; top: 22%; right: 18%; transform: rotate(8deg); }
.quebec-context__visual i { width: 5.5rem; height: 7.5rem; bottom: 12%; left: 23%; transform: rotate(-12deg); }
.quebec-context__visual b { width: 4rem; height: 4rem; right: 23%; bottom: 17%; border-radius: 50%; background: var(--color-brand-orange); }
.quebec-faq .faq-list { max-width: 54rem; margin-inline: auto; }
.quebec-faq .faq-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.quebec-faq .faq-list details + details { margin-top: .75rem; }
.quebec-faq .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; cursor: pointer; color: var(--color-brand-ink); font-weight: 700; list-style: none; }
.quebec-faq .faq-list summary::-webkit-details-marker { display: none; }
.quebec-faq .faq-list summary::after { flex: 0 0 auto; color: var(--color-brand-orange); content: '+'; font-size: 1.5rem; line-height: 1; }
.quebec-faq .faq-list details[open] summary::after { content: '\2212'; }
.quebec-faq .faq-list details > div { padding: 0 1.35rem 1.25rem; color: var(--color-muted); }
.quebec-faq .faq-list details > div p { margin: 0 0 .75rem; }
.quebec-final-cta { padding-block: clamp(4rem, 7vw, 6rem); }
.quebec-final-cta .closing-section__inner { max-width: 70rem; }

@media (min-width: 48rem) {
	.quebec-landing .container { width: min(100% - 3rem, 76rem); }
	.quebec-hero__grid { grid-template-columns: minmax(0,1.1fr) minmax(20rem,.9fr); }
	.quebec-plans .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.quebec-light-section .why-choose-grid, .quebec-devices .device-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.quebec-content-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.quebec-dark-section .process-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.quebec-choice-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.quebec-choice-list li:last-child { grid-column: 1 / -1; }
	.quebec-context__grid { grid-template-columns: minmax(0,1fr) minmax(20rem,.9fr); }
}
@media (min-width: 60rem) {
	.quebec-plans .plan-grid, .quebec-light-section .why-choose-grid, .quebec-devices .device-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.quebec-light-section .why-choose-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.quebec-content-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.quebec-dark-section .process-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.quebec-plans .plan-card--popular { transform: translateY(-.65rem); }
}
@media (max-width: 47.99rem) {
	.quebec-hero__actions .button { width: 100%; text-align: center; }
	.quebec-hero__visual { aspect-ratio: 3 / 2; }
	.quebec-hero__image { width: 100%; height: auto; }
	.quebec-content-card__body { min-height: 36%; padding: 1.25rem 1.35rem 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
	.quebec-landing *, .quebec-landing *::before, .quebec-landing *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}