/* Invoice Candy homepage (Home/Index.cshtml, anonymous). tokens, buttons and the header/footer live in ic-site.css.
   scoped under .ic-home: mkt-legacy.css (the trimmed Webflow export), screen.css and the layout's own h2 rule also style h1-h3, p, section and img */

.ic-header { --ic-header-bg: rgba(255, 240, 243, .86); } /* the header blends into the pink hero here */

.ic-home { background: #fff; color: var(--ic-body); font-family: var(--ic-text); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.ic-home *, .ic-home *::before, .ic-home *::after { box-sizing: border-box; }
.ic-home img { display: block; max-width: 100%; }
.ic-home h1, .ic-home h2, .ic-home h3 { margin: 0; color: var(--ic-ink); font-family: var(--ic-display); font-weight: 700; letter-spacing: -.015em; }
.ic-home p { margin: 0; }
.ic-home section { scroll-margin-top: 90px; }
.ic-home :focus-visible { outline: 3px solid var(--ic-pink); outline-offset: 3px; border-radius: 6px; }
.ic-textlink { padding-bottom: 2px; border-bottom: 2px solid var(--ic-pink); color: var(--ic-ink); font-family: var(--ic-display); font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.ic-textlink:hover { color: var(--ic-pink); text-decoration: none; }

/* hero */
.ic-hero { overflow: hidden; padding: 64px 0 0; background: var(--ic-sugar); }
.ic-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.ic-home .ic-hero h1 { max-width: 9ch; font-size: clamp(3.2rem, 7.6vw, 6.6rem); font-weight: 800; line-height: .9; letter-spacing: -.035em; }
.ic-home .ic-lede { max-width: 30ch; margin-top: 1.5rem; color: var(--ic-body); font-size: 1.25rem; line-height: 1.5; }
.ic-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.ic-assurances { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.75rem 0 0; padding: 0; color: var(--ic-muted); font-size: .95rem; list-style: none; }
.ic-assurances li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.ic-assurances svg { flex: none; }

.ic-fan { position: relative; height: 520px; }
.ic-fan a { position: absolute; top: 50%; left: 50%; width: min(260px, 42%); text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), z-index 0s .1s; }
.ic-fan img { width: 100%; height: auto; aspect-ratio: 400 / 517; object-fit: cover; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 rgba(0, 11, 15, .06), 0 30px 50px -24px rgba(0, 11, 15, .45); }
.ic-fan .ic-tag { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: .55rem .7rem .45rem; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--ic-ink); font-family: var(--ic-display); font-size: .88rem; font-weight: 600; line-height: 1.2; opacity: 0; translate: 0 6px; transition: opacity .2s, translate .2s; }
.ic-fan a:nth-child(1) { transform: translate(-118%, -46%) rotate(-11deg); z-index: 1; }
.ic-fan a:nth-child(2) { transform: translate(-50%, -54%) rotate(0deg); z-index: 3; }
.ic-fan a:nth-child(3) { transform: translate(18%, -46%) rotate(11deg); z-index: 2; }
.ic-fan a:hover, .ic-fan a:focus-visible { z-index: 5; }
.ic-fan a:nth-child(1):hover, .ic-fan a:nth-child(1):focus-visible { transform: translate(-118%, -52%) rotate(-7deg) scale(1.04); }
.ic-fan a:nth-child(2):hover, .ic-fan a:nth-child(2):focus-visible { transform: translate(-50%, -60%) scale(1.04); }
.ic-fan a:nth-child(3):hover, .ic-fan a:nth-child(3):focus-visible { transform: translate(18%, -52%) rotate(7deg) scale(1.04); }
.ic-fan a:hover .ic-tag, .ic-fan a:focus-visible .ic-tag { opacity: 1; translate: 0 0; }

/* template rail */
.ic-rail-wrap { position: relative; margin-top: 28px; padding: 28px 0 72px; }
.ic-rail-head { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 18px; }
.ic-rail-btn { display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 2px solid var(--ic-ink); border-radius: 50%; background: transparent; color: var(--ic-ink); cursor: pointer; }
.ic-rail-btn:hover { background: var(--ic-ink); color: #fff; }
.ic-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px)); padding: 6px max(24px, calc((100vw - 1200px) / 2 + 24px)) 18px; scrollbar-width: none; }
.ic-rail::-webkit-scrollbar { display: none; }
.ic-rail a { flex: 0 0 210px; width: 210px; min-width: 0; color: var(--ic-ink); text-decoration: none; scroll-snap-align: start; }
.ic-rail img { width: 100%; height: auto; aspect-ratio: 400 / 517; object-fit: cover; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 11, 15, .06), 0 18px 30px -22px rgba(0, 11, 15, .5); transition: transform .25s ease; }
.ic-rail a:hover img { transform: translateY(-6px); }
.ic-rail-label { display: block; margin-top: .8rem; font-family: var(--ic-display); font-size: .98rem; font-weight: 600; line-height: 1.25; }

@media screen and (max-width: 960px) {
    .ic-hero { padding-top: 40px; }
    .ic-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .ic-home .ic-hero h1 { max-width: none; }
    .ic-fan { height: 380px; margin-top: 8px; }
    .ic-fan a { width: min(200px, 40%); }
}
@media screen and (max-width: 520px) {
    .ic-fan { height: 300px; }
    .ic-rail a { flex-basis: 170px; width: 170px; }
}

/* sections */
.ic-section { padding: 120px 0; }
.ic-home .ic-section-title { max-width: 14ch; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: .98; letter-spacing: -.03em; }

/* steps */
.ic-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.ic-step { position: relative; }
.ic-step figure { position: relative; overflow: hidden; margin: 0; aspect-ratio: 5 / 4; border-radius: 22px; } /* the illustrations' viewBox is 400x320 */
.ic-step figure svg { display: block; width: 100%; height: 100%; }
.ic-illo-one { background: var(--ic-sugar); }
.ic-illo-two { background: #EEF0FF; }
.ic-illo-three { background: #FFEDE8; }
.ic-step-num { margin: 28px 0 12px; color: var(--ic-pink); font-family: var(--ic-display); font-size: 5.5rem; font-weight: 800; line-height: .8; letter-spacing: -.04em; }
.ic-step:nth-child(2) .ic-step-num { color: #7C86E8; }
.ic-step:nth-child(3) .ic-step-num { color: #F27A63; }
.ic-home .ic-step h3 { margin-bottom: .6rem; font-size: 1.65rem; line-height: 1.1; }
.ic-home .ic-step p { max-width: 34ch; }
.ic-steps-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 56px; padding: 28px 32px; border-radius: 22px; background: var(--ic-mist); }
.ic-home .ic-steps-cta p { flex: 1; min-width: 220px; color: var(--ic-ink); font-family: var(--ic-display); font-size: 1.25rem; font-weight: 600; }
@media screen and (max-width: 860px) {
    .ic-steps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .ic-step figure { max-width: 520px; }
}

/* features */
.ic-features { padding: 20px 0 120px; }
.ic-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 56px 0; }
.ic-feature + .ic-feature { border-top: 1px solid var(--ic-line); }
.ic-feature--flip .ic-feature-media { order: -1; }
.ic-feature-media { position: relative; padding: 0 24px 24px 0; }
.ic-feature-media::before { content: ""; position: absolute; inset: 24px 0 0 24px; border-radius: 28px; background: var(--ic-peach); }
.ic-feature:nth-child(2) .ic-feature-media::before { background: var(--ic-lav); }
.ic-feature:nth-child(3) .ic-feature-media::before { background: #FFC6D6; }
.ic-feature-media img { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; }
.ic-home .ic-feature h3 { max-width: 15ch; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -.025em; }
.ic-home .ic-feature p { max-width: 44ch; margin-top: 1.2rem; font-size: 1.125rem; }
.ic-feature .ic-textlink { display: inline-block; margin-top: 1.8rem; }
.ic-pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ic-pay-methods li { margin: 0; padding: .5rem .85rem .4rem; border: 1px solid var(--ic-line); border-radius: 999px; background: var(--ic-mist); color: var(--ic-ink); font-family: var(--ic-display); font-size: .9rem; font-weight: 600; line-height: 1.2; }
@media screen and (max-width: 860px) {
    .ic-feature { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ic-feature--flip .ic-feature-media { order: 0; }
}

/* FAQ */
.ic-faq { padding: 120px 0; background: var(--ic-mist); }
.ic-faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.ic-faq-side { position: sticky; top: 110px; }
.ic-home .ic-faq .ic-section-title { max-width: 10ch; }
.ic-contact-card { margin-top: 36px; padding: 28px; border-radius: 22px; background: var(--ic-ink); color: #d9dfe1; }
.ic-home .ic-contact-card h2 { margin-bottom: .5rem; color: #fff; font-size: 1.45rem; line-height: 1.2; }
.ic-contact-card a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ic-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ic-faq-list { display: flex; flex-direction: column; gap: 10px; }
.ic-faq-list details { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--ic-line); transition: box-shadow .2s; }
.ic-faq-list details[open] { box-shadow: 0 0 0 2px var(--ic-ink); }
.ic-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; list-style: none; cursor: pointer; }
.ic-faq-list summary::-webkit-details-marker { display: none; }
.ic-home .ic-faq-list summary h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.ic-plus { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ic-sugar); color: var(--ic-ink); transition: transform .25s, background-color .25s; }
.ic-faq-list details[open] .ic-plus { transform: rotate(45deg); background: var(--ic-pink); color: #fff; }
.ic-home .ic-faq-list details p { max-width: 60ch; padding: 0 24px 24px; color: var(--ic-body); }
.ic-faq-list details p a { color: var(--ic-ink); font-weight: 600; }
@media screen and (max-width: 900px) {
    .ic-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ic-faq-side { position: static; }
}

@media screen and (max-width: 600px) {
    .ic-section, .ic-faq { padding: 80px 0; }
    .ic-features { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .ic-home *, .ic-home *::before, .ic-home *::after { transition: none !important; animation: none !important; }
}