/* PONSUM home (index.html).
   Structure, sizes, spacing, breakpoints and motion follow summ.com's home, measured live at 390 and 1440
   (Summ's Tailwind classes are quoted next to each rule). Tokens, type, buttons, themes and shared components
   come from base.css; this file only holds what the home page adds. */

/* ======================================================================================== 1. hero */
.hero.under-header { padding-top: 0; }                                   /* Summ offsets its content itself */
.hero__container { padding-top: 16px; padding-bottom: 40px; }            /* pt-4 pb-10 md:pt-8 md:pb-0 */
@media (min-width: 768px) { .hero__container { padding-top: 32px; padding-bottom: 0; } }
.hero__inner { max-width: 60rem; margin-inline: auto; padding: 7.5rem 0 8px; text-align: center; }  /* pt-[7.5rem] pb-2 md:pt-[10rem] */
@media (min-width: 768px) { .hero__inner { padding: 10rem 0 0; } }

.hero__partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 60px; }
@media (min-width: 768px) { .hero__partners { flex-direction: column; } }
.hero__logos { display: flex; align-items: center; justify-content: center; gap: 14px; color: #201d19; }
.hero__logo { display: inline-flex; }
.hero__logo svg { display: block; }

.hero__title { max-width: 291px; margin-inline: auto; text-wrap: balance; }            /* max-w-[291px] */
@media (min-width: 768px) { .hero__title { max-width: none; margin-inline: calc(-1 * min(2.125rem, var(--gutter) - 4px)); } } /* md:-mx-[2.125rem], never past the gutter */
/* ACCURATE ONCHAIN TAXES. is 13.1 em wide: from 992 the size follows the viewport until it reaches Summ's 76 px */
@media (min-width: 992px) { .hero__title { font-size: min(var(--font-size-heading-xl-h1), calc((100vw - 64px) / 13.2)); line-height: .908; letter-spacing: -.02em; } }
@media (max-width: 991px) { .hero__br { display: none; } }             /* two display lines from 992, natural wrap below */
.hero__sub { max-width: 42rem; margin: 20px auto 0; }                    /* mt-5 max-w-2xl */
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; max-width: 56rem; margin: 60px auto 0; }
@media (min-width: 768px) { .hero__trust { flex-wrap: nowrap; gap: 24px; } }
.hero__live { display: inline-flex; align-items: center; }
.hero__live img { width: 24px; height: 24px; margin-right: 8px; }
.hero__cta { display: flex; width: max-content; margin: 32px auto 0; }  /* mt-8 */
.hero__note { margin-top: 16px; }                                         /* mt-4 */
/* on phones the note lands on the garden hedges of the sky (2.6:1 on the dark green): a cream chip under it */
@media (max-width: 767px) { .hero__note { display: inline-block; padding: 5px 12px; border-radius: var(--radius-full); background: rgba(249, 248, 238, .82); } }

/* The product screenshot rises from the bottom edge on the first scroll (Summ's hero-product). It sits in
   normal flow 76 px below the note, so it never covers text or buttons; the section clips its last 72 px. */
.hero__product { position: relative; width: 100%; margin: 4.75rem auto -4.5rem; container-type: inline-size; }
.hero__product > img { width: 100%; height: auto; }
@media (max-width: 478px) { .hero__product { display: none; } }
html.home-js .hero__product { transform: translateY(100%); visibility: hidden; transition: transform 1.2s cubic-bezier(.45, 0, .15, 1), visibility 0s; }
html.home-js .hero__product.is-revealed { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { html.home-js .hero__product { transform: none; transition: none; } }

/* =================================================================================== 2. wallet strip */
.strip__label { padding-inline: 20px; text-align: center; color: var(--text-secondary); }  /* px-5 md:px-20 */
@media (min-width: 768px) { .strip__label { padding-inline: 80px; } }
.strip__wrap { width: min(100%, 72rem); margin: 20px auto 0; padding-inline: 1rem; }        /* container-shell mt-5 */
@media (min-width: 768px) { .strip__wrap { padding-inline: 1.5rem; } }
.strip .marquee__group { padding-inline: 16px; }
@media (min-width: 768px) { .strip .marquee__group { padding-inline: 24px; } }
.strip__chip { display: inline-flex; flex-shrink: 0; align-items: center; height: 37px; padding: 0 16px; border: 1px solid #454039; border-radius: var(--radius-full); color: #e1dfcf; white-space: nowrap; }
@media (min-width: 768px) { .strip__chip { height: 40px; } }

/* ============================================================================ 3. know where you stand */
@media (min-width: 992px) { .know__head { max-width: min(47.5vw, 42.5rem); margin-inline: auto; } }
.know__grid { display: grid; gap: 40px; margin-top: 56px; }              /* mt-14 gap-10 md:grid-cols-3 md:gap-0 */
@media (min-width: 768px) { .know__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.know__step { position: relative; min-width: 0; }
@media (min-width: 768px) { .know__step { padding-inline: 32px; } }
.know__h { margin-top: 16px; }
.know__p { margin-top: 8px; }
.know__visual { width: 100%; max-width: 17.75rem; height: 15.5625rem; margin: 20px auto 0; }
.know__visual > img { width: 100%; height: auto; }
.know__conn { display: none; position: absolute; top: 0; right: -7px; width: 14px; height: 100%; max-height: 27.5rem; object-fit: contain; object-position: top; pointer-events: none; }
@media (min-width: 768px) { .know__conn { display: block; } }
.know__cta { margin-top: 48px; text-align: center; }

/* Chrome card visuals: Summ's images with the coins, 2024 dates and figures that named BTC or SOL redrawn in the image
   itself by tools/recolor.py (never covered in HTML). The box keeps the image ratio, so the cards lay out as before. */
.cv { position: relative; width: 100%; aspect-ratio: var(--ar); margin-inline: auto; }
.cv > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ========================================================================== 4. expertly tamed taxes */
.taxes { position: relative; }
.taxes__bgs, .taxes__bg { position: absolute; inset: 0; pointer-events: none; }
.taxes__bg { opacity: 0; transition: opacity .5s; }
.taxes__bg.is-on { opacity: 1; }
/* Summ cross-fades one gradient per slide; its lavender tops turn mint, the lime layer is Summ's own */
.taxes__bg--1 { background-image: linear-gradient(#dcf6c6, #eef4c9 25%, #fbc9a4 50%, #e8965c 75%, #fca364); }
.taxes__bg--2 { background-image: linear-gradient(#ecf697, #bdea80 34%, #8ed568 69%, #6ab153); }
.taxes__bg--3 { background-image: linear-gradient(#fb704a, #fb7659 25%, #f794be 75%, #f7b6d2); }
.taxes__container { position: relative; z-index: 1; }
.taxes__intro { max-width: 56rem; margin: 16px auto 0; }                 /* mt-4 max-w-4xl */
.taxes__slider { --slider-gap: 2.5rem; max-width: 68rem; margin: 48px auto 0; padding-bottom: 8px; }  /* mt-12 max-w-[68rem] pb-2 */
.taxes__slide { width: min(20.625rem, 100%); text-align: center; }
@media (min-width: 768px) { .taxes__slide { width: 21rem; padding-bottom: 16px; } }
.taxes__art { display: flex; align-items: flex-end; justify-content: center; height: 18rem; max-width: 20.625rem; margin-inline: auto; }
@media (min-width: 768px) { .taxes__art { height: 21rem; max-width: 21rem; } }
.taxes__art img { width: 100%; max-height: 100%; object-fit: contain; }
.taxes__line { display: block; width: 100%; max-width: 20rem; margin: 8px auto 0; }
@media (max-width: 478px) { .taxes__line { display: none; } }
.taxes__h { margin-top: 20px; }
.taxes__p { max-width: 24rem; margin: 16px auto 0; }
.taxes__country { margin-top: 10px; padding-block: 6px; text-decoration: underline; text-underline-offset: 3px; font-size: var(--font-size-button-s); line-height: var(--line-height-button-s); }
.taxes__star { position: absolute; z-index: 1; width: 32px; height: 32px; pointer-events: none; }   /* top-8 left-8 h-8 w-8 */
.taxes__star--tl { top: 32px; left: 32px; }
.taxes__star--tr { top: 32px; right: 32px; }
@media (max-width: 767px) { .taxes__star--tl, .taxes__star--tr { top: 20px; } }   /* clear of the two line heading on phones */
/* the bottom corner sparkles are the slider arrows */
.taxes__arrow { position: absolute; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(32, 29, 25, .4); border-radius: var(--radius-full); background: rgba(249, 248, 238, .3); color: #201d19; transition: background-color .15s, border-color .15s; }
.taxes__arrow:hover { background: rgba(249, 248, 238, .65); border-color: #201d19; }
.taxes__arrow svg { width: 22px; height: 22px; }
.taxes__arrow--prev { left: 24px; }
.taxes__arrow--prev svg { transform: scaleX(-1); }
.taxes__arrow--next { right: 24px; }

/* feature slider (taxes, covered): items share one grid cell and are moved by home.js around the centre */
.slider__viewport { position: relative; overflow: hidden; touch-action: pan-y; outline-offset: 4px; border-radius: 4px; }
.slider__track { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--slider-gap, 0px); }
.slider__item { grid-area: 1 / 1; justify-self: center; align-self: end; min-width: 0; opacity: .4; transition: transform .5s ease, opacity .5s ease; }
.slider__item.is-active { opacity: 1; }
.slider__item.no-anim, .slider.is-dragging .slider__item { transition: none; }
.slider__item.is-far { visibility: hidden; }
.slider.is-dragging .slider__viewport { cursor: grabbing; user-select: none; }
/* a native image drag would cancel the swipe */
.slider__viewport img, .loop__viewport img { -webkit-user-drag: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .slider__item, .taxes__bg { transition: none; } }

/* ================================================================== 5. onchain cases + live chain strip */
.cases { --loop-gap: 1.25rem; }
@media (min-width: 468px) { .cases { --loop-gap: 2rem; } }
/* summ.com renders this section with 88 px padding from 768 up (its md rule wins over the 992 one) */
@media (min-width: 768px) { .cases.section--l { padding-block: 88px; } }
.cases__loop { padding-bottom: 12px; }                                   /* pb-3 */

/* looping scroller (cases, track): the track is moved by home.js; drag, swipe and arrow keys move it by hand */
.loop__viewport { position: relative; overflow: hidden; touch-action: pan-y; outline-offset: -2px; }
.loop__track { position: relative; display: flex; width: max-content; gap: var(--loop-gap, 1.25rem); will-change: transform; }
.loop.is-dragging .loop__viewport { cursor: grabbing; user-select: none; }

.case-card { display: flex; flex-direction: column; flex-shrink: 0; width: min(295px, calc(100vw - 40px)); min-height: 256px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 12px; padding: 20px; color: #f9f8ee; }
@media (min-width: 768px) { .case-card { width: 414px; min-height: 264px; padding: 24px; } }
@media (min-width: 992px) { .case-card { width: calc(32.25 * var(--u)); padding: calc(1.5 * var(--u)); } }
.case-card__body { color: #f9f8ee; }
.case-card__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 36px; }   /* mt-auto gap-3 pt-9 */
.case-card__avatar { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #2f2b24; }
@media (min-width: 992px) { .case-card__avatar { width: calc(2 * var(--u)); height: calc(2 * var(--u)); } }
.case-card__avatar::after { content: ''; position: absolute; inset: 28%; background: #45f824; -webkit-mask: url('/img/brand/ponsum-mark.svg') center / contain no-repeat; mask: url('/img/brand/ponsum-mark.svg') center / contain no-repeat; }
.case-card__who { min-width: 0; }
.case-card__who p { color: #f9f8ee; }
.case-card__who .case-card__handle { color: #928a7d; }   /* 4.9:1 on the ink card (#8a8275 is 4.4:1) */
.case-card__tag { margin-left: auto; }
.case-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid currentColor; border-radius: var(--radius-full); font-family: var(--font-label); text-transform: uppercase; white-space: nowrap; font-size: var(--font-size-label-xs); letter-spacing: var(--letter-spacing-label-xs); line-height: 1; }
.case-tag--gain { color: #e1dfcf; }
.case-tag--income { color: #45f824; }
.case-tag--none { color: #b2aea2; }
@media (max-width: 467px) {
  .case-card { text-align: center; padding: 24px; }
  .case-card__foot { flex-wrap: wrap; justify-content: center; row-gap: 16px; padding-top: 40px; }
  .case-card__who { text-align: left; }
  .case-card__tag { flex-basis: 100%; margin-left: 0; }
}

/* Summ's review row (trustbox-gap: mt 80 / 7.5u, mb 48, 140 px tall) holds the live chain numbers */
.cases__strip { margin-top: 80px; margin-bottom: 48px; }
@media (min-width: 992px) { .cases__strip { margin-top: calc(7.5 * var(--u)); } }
.cases__strip .chain-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; justify-items: center; gap: 24px 16px; min-height: 140px; text-align: center; }
.cases__strip .chain-strip__live, .cases__strip .chain-strip__retry { grid-column: 1 / -1; }
.cases__strip .chain-stat { flex-direction: column; align-items: center; gap: 6px; white-space: normal; }
.cases__strip .chain-stat__value { font-family: var(--font-body); font-weight: 400; font-size: var(--font-size-subheading-xs-h5); line-height: var(--line-height-subheading-xs-h5); letter-spacing: 0; color: var(--text-primary); white-space: nowrap; }
@media (min-width: 768px) {
  .cases__strip .chain-strip { display: flex; align-items: stretch; justify-content: space-between; gap: 0; }
  .cases__strip .chain-strip > * { flex: 1 1 0; min-width: 0; }
  .cases__strip .chain-strip__live { flex: 1.25 1 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
  .cases__strip .chain-stat { align-items: flex-start; justify-content: center; padding: 20px 0 20px 24px; border-left: 1px solid #454039; text-align: left; }
  .cases__strip .chain-strip__retry { flex: 0 0 auto; align-self: center; padding-left: 24px; }
  .cases__strip .chain-strip, .cases__strip .chain-strip__live { text-align: left; }
}
/* tablet: five columns are narrow, so the numbers step down a size */
@media (min-width: 768px) and (max-width: 1023px) {
  .cases__strip .chain-stat { padding-left: 16px; }
  .cases__strip .chain-stat__value { font-size: var(--font-size-button-m); line-height: var(--line-height-body-m); }
}

/* ======================================================================== 6. track every move */
.track.section { padding-block: 64px; }                                   /* py-16 md:py-[min(8.33325vw,7.5rem)] */
@media (min-width: 768px) { .track.section { padding-block: min(8.33325vw, 7.5rem); } }
.track__head { width: min(100%, 80rem); margin-inline: auto; padding-inline: 20px; }   /* max-w-[80rem] px-5 md:px-20 */
@media (min-width: 768px) { .track__head { padding-inline: 80px; } }
.track { --loop-gap: 1.25rem; }
.track__loop { margin-top: 40px; padding-bottom: 16px; }                  /* mt-10 pb-4 */
.track-card { position: relative; flex-shrink: 0; width: min(21.875rem, calc(100vw - 40px)); overflow: hidden; border: 1px solid #d6d1c9; border-radius: 16px; background: #f9f8ee; padding: 20px; color: #201d19; box-shadow: inset -20px -20px 50px rgba(255, 255, 255, .4), inset 0 0 10px rgba(0, 0, 0, .05), inset 0 2px 30px rgba(0, 0, 0, .05); }
@media (min-width: 768px) { .track-card { width: 23.75rem; padding: 32px; } }
.track-card__hover { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background-image: var(--hover); }
.track-card:hover .track-card__hover { opacity: 1; }
.track-card--1 { --hover: linear-gradient(#c4f5b4 35%, #8ee877); }     /* Summ's lilac hover, now green */
.track-card--2 { --hover: linear-gradient(#f5b46e 33%, #f19546); }
.track-card--3 { --hover: linear-gradient(#bbdfdf 33%, #94cdcc); }
.track-card--4 { --hover: linear-gradient(#aed79e 33%, #82bd6c); }
.track-card--5 { --hover: linear-gradient(#fb866f 33%, #f35b3c); }
.track-card--6 { --hover: linear-gradient(#9cb0ff 33%, #7584ff); }
.track-card__body { position: relative; }
.track-card__p { margin-top: 12px; }
.track-card__vis { --vis-h: 13.75rem; display: flex; align-items: flex-end; justify-content: center; height: var(--vis-h); margin-top: 20px; }
@media (min-width: 768px) { .track-card__vis { --vis-h: 14.375rem; } }
.track-card__vis > img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.track-card__vis > .cv { width: min(100%, calc(var(--vis-h) * var(--ar))); margin: 0; }
.track__cta { margin-top: 32px; text-align: center; }                     /* mt-8, phones only */
@media (min-width: 480px) { .track__cta { display: none; } }

/* ==================================================================== 7. every tax report you need */
@media (min-width: 992px) { .reports__head { max-width: min(31vw, 28rem); margin-inline: auto; } }
.reports__p { max-width: 33rem; margin: 24px auto 0; }                   /* mt-6 max-w-[33rem] */
.reports__row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
@media (min-width: 768px) { .reports__row { flex-direction: row; gap: 32px; } }
.reports__wire { flex: 0 1 auto; min-width: 0; width: min(17.3rem, 72vw); margin-block: 7px; }   /* Summ's wire svg box is 16 px tall */
.reports__btn { height: auto; padding: 14px 28px; border-radius: var(--radius-md); font-size: var(--font-size-button-s); line-height: var(--line-height-button-s); letter-spacing: var(--letter-spacing-button-s); }
.reports__label { margin-top: 64px; }                                     /* mt-16 */
.reports__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.reports__chips .btn--chip { border-radius: var(--radius-md); }
.reports__chips .btn--chip svg { width: 15px; height: 15px; }
@media (max-width: 478px) { .reports__chips { flex-direction: column; } .reports__chips .btn--chip { width: 11.375rem; } }
.reports__more { margin-top: 48px; color: #6f685d; }                     /* Summ #8d857d, darkened for AA at 12 px */

/* =================================================================================== 8. FAQ */
/* the live FAQ values (506 px heading, 60 px list gap, two columns from 768 px) are base.css defaults now */

/* ========================================================================== 9. we have you covered */
.covered { position: relative; padding: 116px 0 64px; }                  /* pt-[7.25rem] pb-16 */
@media (max-width: 991px) { .covered { padding-bottom: 26rem; } }        /* plants sit under the text below 992 */
@media (min-width: 480px) { .covered { padding-top: 192px; } }
@media (min-width: 992px) { .covered { padding-top: min(16.944vw, 15.25rem); padding-bottom: 176px; } }
.covered__inner { position: relative; z-index: 1; text-align: center; }
.covered__slider { --slider-gap: 1.5rem; max-width: 40rem; margin-inline: auto; }
@media (min-width: 480px) { .covered__slider { --slider-gap: 5rem; } }
@media (min-width: 992px) { .covered__slider { --slider-gap: min(5.5555vw, 5rem); max-width: min(44.444vw, 40rem); } }
.covered__tab { text-align: center; cursor: pointer; }
.covered__tab.is-active { cursor: default; }
.covered__pict { width: 80px; height: 80px; margin-inline: auto; object-fit: contain; }
@media (min-width: 480px) { .covered__pict { width: 120px; height: 120px; } }
@media (min-width: 992px) { .covered__pict { width: min(8.3331vw, 7.5rem); height: min(8.3331vw, 7.5rem); } }
.covered__tab p { margin-top: 8px; color: #201d19; white-space: nowrap; }
.covered__head { margin-top: 40px; }
@media (min-width: 480px) { .covered__head { margin-top: 80px; } }
@media (min-width: 992px) { .covered__head { margin-top: min(5.5555vw, 5rem); } }
.covered__p { max-width: 32rem; margin: 40px auto 0; }
@media (min-width: 992px) { .covered__p { max-width: 36rem; margin-top: min(2.7777vw, 2.5rem); } }
.covered__btn { margin-top: 40px; }
@media (min-width: 480px) { .covered__btn { margin-top: 80px; } }
@media (min-width: 992px) { .covered__btn { margin-top: min(5.5555vw, 5rem); } }
/* Venus flytraps: under the text below 992 (Summ's phone layout), beside it from 992, never behind it */
.covered__plant { position: absolute; bottom: 0; width: 9.375rem; pointer-events: none; }
.covered__plant--l { left: 0; }
.covered__plant--r { right: 0; }
@media (min-width: 992px) {
  .covered__plant { bottom: auto; top: min(19.9vw, 18rem); }
  .covered__plant--l { width: min(16.3rem, calc((100vw - 720px) / 2)); }
  .covered__plant--r { width: min(14.3rem, calc((100vw - 720px) / 2)); }
}

/* ===================================================================== 10. stay sharp, stay connected */
.sharp__grid { display: grid; gap: 40px; }
.sharp__intro { min-width: 0; text-align: center; }
.sharp__p { margin-top: 24px; color: #d2cbc2; }
.sharp__btn { margin-top: 32px; }
.sharp__cards { display: grid; gap: 16px; min-width: 0; }
/* two columns (Summ's 1fr / 1.35fr) once the heading fits beside the cards */
@media (min-width: 1200px) {
  .sharp__grid { grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.35fr); gap: 48px; align-items: start; }
  .sharp__intro { text-align: left; }
}