/* Hand-written styles for the section blocks (src/blocks). Loaded after blocks.css. */

/* Spacing the export set inline on hero headings */
.hero .eyebrow + h1 { margin-top: 20px; }
.iph .eyebrow + h1 { margin-top: 16px; }

/* Buttons under body text */
.codewrap .txt .actions { margin-top: 22px; }
.mtext .actions { margin-top: 10px; }

/* Rich text inside FAQ answers and text columns */
.faq .a p + p, .mtext-txt p + p, .codewrap .txt p + p { margin-top: 12px; }

/* Media + text (from the Capital page's two-column feature) */
.mtext { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mtext-r .mtext-img { order: 2; }
/* Inline (not block) like the export's image, which keeps the line-box gap below it */
.mtext-img img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.mtext-txt { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.mtext-txt > p:not(.eyebrow), .mtext-txt ul, .mtext-txt ol { color: var(--soft); font-size: 16px; }
.mtext-txt ul, .mtext-txt ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.navyband .mtext-txt > p:not(.eyebrow), .navyband .mtext-txt ul, .navyband .mtext-txt ol { color: var(--on-navy-soft); }
@media (max-width: 900px) {
  .mtext { grid-template-columns: 1fr; }
  .mtext-r .mtext-img { order: 0; }
}

/* Content above the navy band's decorative gradient */
.navyband > .wrap { position: relative; }

/* Hero: two columns with an image (the design's norm), one column without */
.hero.hero-solo .wrap { display: block; }
/* Single-column heroes cap the headline at 20ch, as the export's text-only heroes do (placed
   before the 'Large' rules below so those take precedence) */
.hero.hero-solo h1 { max-width: 20ch; }
.hero .statrow { grid-column: 1 / -1; }

/* Accent words in section headings use the hero headline gradient */
h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Quotes on a navy band */
.navyband .quote footer { color: var(--on-navy-soft); }

/* Sub-page heroes (developer integration paths) use an orange eyebrow */
.iph .eyebrow { color: var(--orange); }

/* A call to action on white sits right under the previous section: its divider line separates them */
section.cta-sec:not(.altband):not(.navyband) { padding-top: 0; }

/* Navy sections: cyan eyebrow and white heading, as in the export */
.navyband .eyebrow, .navyband .shead .eyebrow { color: #7cd0ea; }

/* Eyebrow color options (section header) */
.eyebrow.ey-orange, .navyband .shead .eyebrow.ey-orange { color: var(--orange); }
.eyebrow.ey-cyan, .navyband .shead .eyebrow.ey-cyan { color: var(--cyan); }
.navyband h2 { color: #fff; }

/* Buttons under a section's content, and inside a step */
.actions.below { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.step .btn { margin-top: 16px; }

/* Compact grid (.i4) is styled for navy in the export; give it a light version too */
section:not(.navyband) .i4 > div { background: var(--card); border-color: var(--line); }
section:not(.navyband) .i4 b { color: var(--ink); }
section:not(.navyband) .i4 span { color: var(--soft); }
.hstep .btn { margin-top: 16px; }

/* Product cards: closing card in the compact (device lineup) layout, as on the Clover page */
.dev.dev-close { justify-content: center; }
.dev.dev-close b { font-size: 17px; }
.dev.dev-close .btn { margin: 10px auto 0; }

/* Hero: the highlights row is a second .wrap below the two-column grid */
.hero > .wrap + .wrap { display: block; }
.hlogo.hlogo-sm { height: 32px; }

/* Feature grid: 2-column option (collapses to one column on phones) */
.fgrid.fgrid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .fgrid.fgrid-2 { grid-template-columns: 1fr; } }
.mstage-img { width: 100%; max-width: 470px; height: auto; display: block; filter: drop-shadow(0 24px 48px rgba(10,37,64,.28)); }

/* Section spacing overrides (block "Space above / below"); beat .navyband and the CTA default */
section.pt-88, section.cta-sec.pt-88 { padding-top: 88px; }
section.pt-72, section.cta-sec.pt-72 { padding-top: 72px; }
section.pt-64, section.cta-sec.pt-64 { padding-top: 64px; }
section.pt-0 { padding-top: 0; }
/* Keep content margins inside each section. Without this, a section with no top or bottom space
   lets its first or last element's margin push through, opening a strip of page background
   between two bands (e.g. a photo strip continuing an Industries section). */
#main > section { display: flow-root; }
section.pb-96 { padding-bottom: 96px; }
section.pb-88 { padding-bottom: 88px; }
section.pb-72 { padding-bottom: 72px; }
section.pb-0 { padding-bottom: 0; }

/* Image strip: its 52px gap only applies when the next section follows directly (no bottom padding) */
.fuelstrip:last-child { margin-bottom: 0; }
section.pb-0 .fuelstrip:last-child { margin-bottom: 52px; }

/* Story cards without a photo, and the footnote under the grid */
.st .tx.tx-noimg { padding-top: 26px; }
/* Card text starts at the top; the link sits at the bottom so links line up across a row */
.st .tx { justify-content: flex-start; }
.st .tx .k, .st .tx .go { flex: none; }
.st .go { margin-top: auto; padding-top: 8px; }
.st-note { color: var(--soft); font-size: 14px; margin-top: 28px; }

/* Tile grid: space between consecutive groups (the export's inline 72px) */
.pgrid + .shead { margin-top: 72px; }

/* Hero headline sizes: "Large" is the 64px scale used on 11 pages; "wider line" as on Pricing */
.hero.hero-lg h1 { font-size: clamp(40px, 5.4vw, 64px); max-width: 16ch; }
.hero.hero-lg.hero-lg-wide h1 { max-width: 18ch; }
.hero.hero-lg .lede { font-size: 18.5px; max-width: 56ch; margin-top: 24px; }
section.pt-96 { padding-top: 96px; }
.hero.hero-pb-30 { padding-bottom: 30px; }
.hero.hero-pb-40 { padding-bottom: 40px; }
.hero.hero-pb-56 { padding-bottom: 56px; }
.hero.hero-pb-96 { padding-bottom: 96px; }

/* Product showcase: smaller logo option (the export's inline 26px) */
.prodsec .plogo.plogo-sm { height: 26px; }

/* Hero intro line length option */
.hero.hero-lede-48 .lede { max-width: 48ch; }
.hero.hero-lede-50 .lede { max-width: 50ch; }
.hero.hero-lede-52 .lede { max-width: 52ch; }
.hero.hero-lede-54 .lede { max-width: 54ch; }
.hero.hero-lede-56 .lede { max-width: 56ch; }
.hero.hero-lede-58 .lede { max-width: 58ch; }

/* Tile grid: space between consecutive link-card groups too */
.wkgrid + .shead { margin-top: 72px; }

/* Support guide (values from the Time change page; own class names because .dev
   also exists, styled differently, on the Clover page) */
.sg-note { background: color-mix(in srgb, #0b915d 8%, var(--card)); border: 1px solid color-mix(in srgb, #0b915d 30%, transparent); border-radius: 10px; padding: 20px 24px; font-size: 15px; margin-bottom: 44px; }
.sg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sg-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.sg-card b { font: 700 17px/1.3 var(--disp); display: block; margin-bottom: 10px; }
.sg-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; color: var(--soft); font-size: 14.5px; }
.sg-help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.sg-hl { background: var(--alt); border: 1px solid var(--line); border-radius: 10px; padding: 20px 24px; }
.sg-hl b { display: block; font: 650 14px/1.4 var(--disp); }
.sg-hl span { color: var(--soft); font-size: 13.5px; }
@media (max-width: 820px) { .sg-grid, .sg-help { grid-template-columns: 1fr; } }

/* Media + text: stats row (the Capital page's inline-styled numbers) */
.mtext-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; margin-top: 8px; }
.mtext-stats b { font: 800 26px/1 var(--disp); letter-spacing: -.03em; }
.mtext-stats span { display: block; color: var(--soft); font-size: 13px; margin-top: 5px; }

/* Feature grid: photo between the heading and the cards (Capital's inline styles) */
.fg-img { width: 100%; height: 300px; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 44px; }

/* Hero product image sizes (each with its page's own shadow: Handpoint 540px, Exatouch 560px) */
.heroimg.heroimg-540 { max-width: 540px; filter: drop-shadow(0 22px 30px rgba(10,37,64,.22)); }
.heroimg.heroimg-560 { max-width: 560px; filter: drop-shadow(0 26px 34px rgba(10,37,64,.3)); }

/* Highlights block without the divider line (the export's inline border/margin/padding reset) */
.pillars.pillars-plain { border-top: 0; margin-top: 0; padding-top: 0; }

/* Feature grid: tag row above the cards (eGiftSolutions' inline 40px) */
.chips.fg-tags { margin-bottom: 40px; }

/* Chip list footnote (eGiftSolutions' inline styles) */
.chips-note { color: var(--soft); font-size: 14px; margin-top: 22px; max-width: 70ch; }

section.pt-56 { padding-top: 56px; }
/* Secondary button on navy (Feature lists) */
.btn.ghost-dark { background: transparent; color: #fff; border: 1.5px solid var(--navy-line); }
/* Small print under pricing cards */
.pc-note { color: var(--soft); font-size: 13.5px; margin-top: 24px; }
/* Feature lists: buttons under the lists */
.navyband .entcols + .actions, .navyband .entgrid + .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 48px; }
/* Hero check row: under the text column, as in the export */
.hero > .wrap + .wrap.trust-wrap { display: grid; }
/* Hero logo, large (ISO360) */
.hlogo.hlogo-lg { height: 46px; }
/* Code sample, strip style: spacing the export set inline */
.apistrip h3 { margin-top: 12px; }
.apistrip .actions { margin-top: 20px; }
/* Blue-label cards that link, with a "Learn more →" line (Resellers) */
a.mod { color: inherit; text-decoration: none; }
a.mod .tile-cta { margin-top: auto; padding-top: 12px; color: var(--blue); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
/* On hover only the words underline (.tl); the arrow nudges right instead */
a.mod .tile-cta span { color: inherit; font-size: inherit; line-height: inherit; }
a.mod .tile-cta .ar { transition: transform .18s; }
a.mod:hover .tile-cta { color: var(--blue-d); }
a.mod:hover .tile-cta .tl { text-decoration: underline; }
a.mod:hover .tile-cta .ar { transform: translateX(3px); }
/* Program cards: two per row when there are two; optional short list */
.prog3.prog2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .prog3.prog2 { grid-template-columns: 1fr; } }
.prog p:has(+ ul) { flex: none; }
.prog ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.prog li { padding-left: 20px; position: relative; font-size: 14.5px; font-weight: 500; }
.prog li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 2px; background: var(--orange); }
/* Button sized to its label at the bottom left, like the other card blocks (flex would stretch it) */
.prog .btn { align-self: flex-start; margin-top: 6px; }
/* Navy, angled edges (Exatouch, Home, Developers) */
.navyband.navy-angled { clip-path: polygon(0 4.5vw, 100% 0, 100% calc(100% - 4.5vw), 0 100%); padding: 150px 0; }
/* Hero: compact stats under the buttons */
.hero .meta { display: flex; gap: 34px; margin-top: 42px; flex-wrap: wrap; }
.hero .meta b { display: block; font: 800 24px/1 var(--disp); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hero .meta span { display: block; font: 550 12.5px/1.6 var(--body); color: var(--soft); margin-top: 5px; max-width: 19ch; }
/* Hero: scrolling labels */
.marq { border-block: 1px solid var(--line); padding: 18px 0; overflow: hidden; margin-top: 44px; }
.marq .track { display: flex; gap: 14px; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .marq .track { animation: roll 36s linear infinite; } }
@keyframes roll { to { transform: translateX(-50%); } }
.marq i { font: 600 13px/1 var(--body); font-style: normal; color: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 9px 16px; white-space: nowrap; }
/* Feature grid: columns with dividers */
.pcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 900px) { .pcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pcols { grid-template-columns: 1fr; } }
.pcol { padding: 8px 28px 8px 0; border-right: 1px solid var(--line); margin-right: 28px; }
.pcol:last-child { border-right: 0; margin-right: 0; }
@media (max-width: 900px) { .pcol:nth-child(2) { border-right: 0; } }
.pcol .k { font: 700 12px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 12px; }
.pcol b { font: 700 17.5px/1.3 var(--disp); letter-spacing: -.02em; display: block; margin-bottom: 8px; }
.pcol span { color: var(--soft); font-size: 14.5px; line-height: 1.6; }
/* Tabs */
.seg { display: inline-flex; background: var(--alt); border: 1px solid var(--line); border-radius: 8px; padding: 4px; gap: 2px; margin-bottom: 28px; }
.seg button { font: 600 14.5px/1 var(--body); padding: 11px 22px; border-radius: 5px; border: 0; background: transparent; color: var(--soft); cursor: pointer; transition: all .18s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--ground); box-shadow: var(--shadow-sm); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 40px; box-shadow: var(--shadow-sm); }
.panel[hidden] { display: none; }
.panel .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; }
@media (max-width: 820px) { .panel .cols { grid-template-columns: 1fr; } }
.panel h3 { font-size: 24px; margin-bottom: 12px; }
.panel p { color: var(--soft); font-size: 15.5px; }
.panel ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 26px; }
@media (max-width: 560px) { .panel ul { grid-template-columns: 1fr; } }
.panel li { padding-left: 28px; position: relative; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.panel li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 12%, transparent); }
.panel li::after { content: ""; position: absolute; left: 5px; top: 7.5px; width: 8px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.fits { border-left: 1px solid var(--line); padding-left: 40px; }
@media (max-width: 820px) { .fits { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 26px; } }
.fits .k { font: 650 10.5px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--soft); display: block; margin-bottom: 16px; }
.fits .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fits .chips i { font: 600 13px/1 var(--body); font-style: normal; border: 1px solid var(--line); border-radius: 4px; padding: 9px 15px; color: var(--ink); }
.tabimg { width: 100%; max-width: 280px; height: auto; display: block; margin-bottom: 20px; }
.ttnote { margin-top: 24px; background: color-mix(in srgb, var(--blue) 5%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); border-radius: 8px; padding: 18px 20px; font-size: 14px; color: var(--soft); }
.ttnote b { color: var(--ink); }
/* Spec sheet */
.spec { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.spec .sh { background: var(--navy); color: #fff; padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.spec .sh b { font: 700 17px/1 var(--disp); letter-spacing: -.015em; }
.spec .sh span { font: 650 10.5px/1 var(--mono); letter-spacing: .14em; color: #7cd0ea; text-transform: uppercase; }
.spec table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec td { padding: 15px 28px; border-top: 1px solid var(--line); vertical-align: top; }
.spec td:first-child { font: 650 10.5px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); width: 190px; white-space: nowrap; }
.spec .free td { color: var(--blue); font-weight: 600; background: color-mix(in srgb, var(--blue) 4%, transparent); }
.bundlewrap { background: #fff; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.bundlewrap img { width: 100%; max-width: 720px; height: auto; display: block; margin-inline: auto; }
/* Call to action: navy box with moving color (Exatouch, Home) */
/* Call to action without the divider line */
.cta.cta-plain { border-top: 0; padding-top: 0; }
.cta.cta-box { position: relative; display: block; border-top: 0; border-radius: 10px; overflow: hidden; padding: 56px 60px; background: var(--navy); }
.cta-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-box .in { position: relative; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-box h2 { color: #fff; max-width: 20ch; }
.cta-box p { color: rgba(255,255,255,.78); max-width: 48ch; margin-top: 12px; font-size: 15.5px; }
.cta-box .actions { margin-left: auto; }
.cta-box .cta-logo { height: 32px; width: auto; display: block; margin-bottom: 14px; }
@media (max-width: 760px) { .cta.cta-box { padding: 40px 30px; } .cta-box .actions { margin-left: 0; } }
/* Hero: extra-large headline (Exatouch) */
.hero.hero-xl h1 { font-size: clamp(46px, 6.4vw, 80px); line-height: .96; letter-spacing: -.05em; }
.hero.hero-xl .lede { font-size: 19px; line-height: 1.6; max-width: 44ch; margin-top: 26px; }
.hero.hero-xl .actions { margin-top: 36px; }
/* Screenshot cards (Branding) */
.shotcards { display: grid; grid-template-columns: 1fr; gap: 22px; }
.shotcards .tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); align-items: center; }
@media (max-width: 860px) { .shotcards .tile { grid-template-columns: 1fr; } }
.shotcards .shot { position: relative; background: #4456ee; overflow: hidden; min-width: 0; }
.shotcards .shot img { display: block; width: 100%; height: auto; }
.shotcards .shot .before { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: left top; animation: shot-erase 8s ease-in-out infinite; }
.shotcards .shot .rub { position: absolute; top: 0; bottom: 0; width: 8%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: shot-rub 8s ease-in-out infinite; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .shotcards .shot .before, .shotcards .shot .rub { display: none; } }
@keyframes shot-erase { 0%, 18% { clip-path: inset(0 0 0 0); } 52%, 90% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes shot-rub { 0%, 18% { left: -10%; opacity: 0; } 20% { opacity: 1; } 50% { left: 100%; opacity: 1; } 52%, 100% { left: 100%; opacity: 0; } }
.shotcards .cap { padding: 22px 24px; }
.shotcards .cap .k { font: 650 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 8px; }
.shotcards .cap h3 { font: 700 18px/1.3 var(--disp); letter-spacing: -.02em; margin: 0 0 8px; }
.shotcards .cap p { color: var(--soft); font-size: 14.5px; line-height: 1.65; margin: 0; }
.shotnote { margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--orange); background: var(--alt); border-radius: 0 8px 8px 0; font: 550 14.5px/1.6 var(--body); color: var(--ink); }
/* News cards: symbol badge (Branding) */
.pi .icb { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); display: grid; place-items: center; font: 700 16px var(--disp); margin-bottom: 4px; }
/* Text columns with a single column: full reading width */
.story.story-1 { grid-template-columns: 1fr; max-width: 760px; }
/* Tile grid: small group label with a rule (Payments Anywhere toolkit) */
.glabel { font: 650 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.glabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pgrid + .glabel, .wkgrid + .glabel { margin-top: 56px; }
/* Screenshot tour */
.showtabs { display: inline-flex; background: var(--alt); border: 1px solid var(--line); border-radius: 8px; padding: 4px; gap: 2px; margin-bottom: 20px; flex-wrap: wrap; }
.showtabs button { font: 600 14px/1 var(--body); padding: 10px 18px; border-radius: 5px; border: 0; background: transparent; color: var(--soft); cursor: pointer; white-space: nowrap; }
.showtabs button:hover { color: var(--ink); }
.showtabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); box-shadow: var(--shadow-sm); }
.showbig .shots { position: relative; }
.showbig .shot { display: none; }
.showbig .shot.on { display: block; }
.showcap { color: var(--soft); font-size: 14.5px; padding-top: 14px; max-width: 70ch; }
/* Product showcase: info card visual */
.txncard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 30px; box-shadow: var(--shadow-sm); }
.txncard .k { font: 650 10.5px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 16px; }
.txncard .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.txncard .chips i { font: 600 13px/1 var(--body); font-style: normal; border: 1px solid var(--line); border-radius: 5px; padding: 8px 12px; color: var(--ink); }
.txncard > p { color: var(--soft); font-size: 13.5px; margin-top: 16px; }
.txncard .capnum { font: 800 clamp(30px, 3.4vw, 42px)/1 var(--disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.txncard .caprow { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.txncard .caprow b { font: 700 16px/1.2 var(--disp); letter-spacing: -.02em; white-space: nowrap; }
.txncard .caprow span { color: var(--soft); font-size: 13.5px; }
/* Call to action: card with a checklist */
.freeband { border: 1px solid var(--line); border-radius: 8px; padding: 44px 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: var(--card); box-shadow: var(--shadow-sm); }
@media (max-width: 820px) { .freeband { grid-template-columns: 1fr; padding: 34px 28px; } }
.freeband h2 { font-size: clamp(24px, 3vw, 32px); }
.freeband p { color: var(--soft); margin-top: 12px; }
.freeband .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.freeband ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.freeband li { padding-left: 30px; position: relative; font-size: 15px; font-weight: 500; }
.freeband li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 12%, transparent); }
.freeband li::after { content: ""; position: absolute; left: 5.5px; top: 8px; width: 8px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
/* Feature cards with a photo (Payment Processing industries) */
.f img.ph { width: 100%; height: 150px; object-fit: cover; border-radius: 7px; display: block; margin-bottom: 10px; }
/* Compact grid: short labels underneath (credentials) */
.creds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.creds i { font: 650 11px/1 var(--mono); letter-spacing: .08em; font-style: normal; color: #7cd0ea; border: 1px solid var(--navy-line); border-radius: 99px; padding: 9px 14px; text-transform: uppercase; }
/* Photo mosaic, strip layout */
.mosaic.mosaic-strip { grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .mosaic.mosaic-strip { grid-template-columns: repeat(3, 1fr); } }
.mosaic-strip img { aspect-ratio: auto; height: 110px; }
.mosaic-strip figcaption { padding: 20px 10px 8px; font: 650 11px/1.2 var(--body); }
section.pb-0 + section.pt-0 .mosaic-strip { margin-top: 14px; }
/* Hero, dark style (Developers): navy with moving color, angled bottom */
.hero.hero-dark { background: #050f1d; color: var(--on-navy); padding: 168px 0 110px; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%); }
.hero-dark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-dark .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,15,29,.25), rgba(5,15,29,.88) 78%); }
.hero-dark .wrap { position: relative; }
.hero-dark h1 { color: #fff; }
.hero-dark h1 em { background: linear-gradient(92deg, #5cc8f0, #7a73ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-dark .lede { color: var(--on-navy-soft); }
.hero-dark .lede b { color: #fff; }
.hero-dark .eyebrow { color: #7cd0ea; }
.hero-dark .eyebrow.ey-cyan { color: var(--cyan); }
/* Hero: tags under the intro */
.schemes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.schemes i { font: 650 11px/1 var(--mono); letter-spacing: .09em; font-style: normal; color: var(--blue); border: 1px solid var(--line); border-radius: 4px; padding: 8px 13px; text-transform: uppercase; }
.hero-dark .schemes i { color: #7cd0ea; border-color: #1d3f63; }
/* Hero: typing code terminal */
.term { background: #0a1626; border: 1px solid #1d3f63; border-radius: 8px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); overflow: hidden; min-height: 404px; }
.term .bar { display: flex; gap: 6px; padding: 13px 16px; border-bottom: 1px solid #16304f; align-items: center; }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: #1d3f63; }
.term .bar span { margin-left: 10px; font: 650 11px/1 var(--mono); letter-spacing: .08em; color: #628bb0; }
.term pre { margin: 0; padding: 22px 24px; overflow-x: auto; font: 13.5px/1.75 var(--mono); color: #c8dff5; min-height: 340px; }
.term .c { color: #587da1; } .term .g { color: #63e2a7; } .term .b { color: #7cc4f8; } .term .y { color: #f2d492; } .term .vi { color: #b3aeff; }
.term .cur { display: inline-block; width: 8px; height: 15px; background: #7cc4f8; vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) { .term .cur { animation: blink 1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }
/* Steps, path style (Developers): stops on a line with a moving pulse */
.railway { display: grid; grid-template-columns: repeat(var(--stops, 5), 1fr); position: relative; margin-top: 10px; }
@media (max-width: 860px) { .railway { grid-template-columns: 1fr; gap: 20px; } }
/* The line runs from the first stop's center to the last's; the pulse (above the rings) hops between
   them, animated by keyframes generated in Steps/Component.tsx */
.rline { position: absolute; top: 6px; left: calc(50% / var(--stops)); right: calc(50% / var(--stops)); height: 2px; background: var(--line); }
.rpulse { position: absolute; top: 2.5px; left: calc(50% / var(--stops) - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--blue) 60%, transparent); opacity: 0; z-index: 2; }
@media (max-width: 860px) { .rline, .rpulse { display: none; } }
.stop { position: relative; padding: 30px 16px 0; text-align: center; --stop-bg: var(--ground); }
.altband .stop { --stop-bg: var(--alt); }
.stop::before { content: ""; position: absolute; top: 0; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--stop-bg); border: 2.5px solid var(--blue); z-index: 1; }
.stop.hot::before { background: var(--blue); }
@media (max-width: 860px) { .stop { text-align: left; padding: 0 0 0 30px; } .stop::before { left: 0; top: 3px; } }
.stop .k { font: 650 10px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 8px; }
.stop b { font: 700 16px/1.3 var(--disp); letter-spacing: -.015em; display: block; }
.stop span { color: var(--soft); font-size: 13px; line-height: 1.55; display: block; margin-top: 6px; }
/* Blue-label cards: a text symbol in the icon square */
.mod .ic.ic-sym { font: 700 15px var(--disp); }
.mods.mods-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .mods.mods-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mods.mods-4 { grid-template-columns: 1fr; } }
/* Hero, light style (homepage): moving color on white, angled bottom */
.hero.hero-light { padding: 172px 0 130px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%); background: var(--ground); }
@media (max-width: 960px) { .hero.hero-light { padding-top: 140px; } }
.hero-light canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-light .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--ground) 96%); }
.hero-light .wrap { position: relative; }
/* Hero: pill links under the buttons */
.hero .sub { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .sub a { font: 650 13.5px/1 var(--body); display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 99px; border: 1.5px solid; transition: background .16s, border-color .16s, transform .16s; }
.hero .sub a:hover { transform: translateY(-1px); }
.hero .sub a b { font-weight: 800; color: var(--ink); }
.hero .sub a .ar { transition: transform .18s; }
.hero .sub a:hover .ar { transform: translateX(3px); }
.cta-iso { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 42%, transparent); }
.cta-iso:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: var(--blue); }
.cta-mer { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 42%, transparent); }
.cta-mer:hover { background: color-mix(in srgb, var(--orange) 9%, transparent); border-color: var(--orange); }
/* Feature grid: large tiles with logos, 2 per row */
.jgrid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); gap: 1px; box-shadow: var(--shadow-sm); }
@media (max-width: 760px) { .jgrid { grid-template-columns: 1fr; } }
.jcell { background: var(--card); padding: 46px 44px; display: flex; flex-direction: column; gap: 13px; position: relative; transition: background .15s; color: inherit; text-decoration: none; }
a.jcell:hover { background: color-mix(in srgb, var(--orange) 3%, var(--card)); }
.jcell .jlogo { height: 30px; width: auto; align-self: flex-start; display: block; }
.jcell .verb { font: 700 clamp(21px, 2.4vw, 28px)/1.1 var(--disp); letter-spacing: -.03em; color: var(--ink); }
.jcell p { color: var(--soft); font-size: 15px; max-width: 40ch; }
.jcell .go { font: 650 14px/1 var(--body); color: var(--blue); margin-top: auto; padding-top: 10px; }
a.jcell:hover .go { color: var(--orange); }
.jtag { position: absolute; top: 18px; right: 20px; font: 650 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); opacity: .7; }
/* Feature grid: footnote line */
.also { margin-top: 30px; color: var(--soft); font: 550 13.5px/1.7 var(--body); }
.also b { color: var(--ink); font-weight: 650; }
.also a { font-weight: 650; }
/* Feature grid: links with a top rule (navy) */
.chan4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 900px) { .chan4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .chan4 { grid-template-columns: 1fr; } }
.chan4 > a, .chan4 > div { border-top: 2px solid #1d4066; padding-top: 18px; display: block; transition: border-color .18s; color: inherit; text-decoration: none; }
.chan4 > a:hover { border-color: var(--orange); }
.chan4 b { display: block; font: 700 18px/1.2 var(--disp); letter-spacing: -.02em; color: #fff; margin-bottom: 8px; }
.chan4 > a:hover b { color: #f2a541; }
.chan4 span { color: var(--on-navy-soft); font-size: 13.5px; line-height: 1.6; }
/* Navy with moving dots */
.navyband.navy-dots { background: #050f1d; }
.navyband.navy-dots::before { display: none; }
.navy-dots > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.navy-dots .dveil { position: absolute; inset: 0; background: radial-gradient(900px 480px at 30% 45%, rgba(5,15,29,.88), rgba(5,15,29,.25) 70%); }
/* Feature lists: card text; two cards side by side */
.ent-c p { color: var(--on-navy-soft); font-size: 14.5px; margin-bottom: 14px; }
.entgrid.entgrid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .entgrid.entgrid-2 { grid-template-columns: 1fr; } }
/* HubSpot form: copy beside a card; HubSpot's markup styled like the Contact form */
.hswrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: start; }
@media (max-width: 880px) { .hswrap { grid-template-columns: 1fr; gap: 32px; } }
.hscopy .shead { margin-bottom: 20px; }
.hscopy p { color: var(--soft); font-size: 16px; line-height: 1.7; }
.hscopy p + p { margin-top: 12px; }
.hscard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 34px; box-shadow: var(--shadow-sm); min-height: 220px; scroll-margin-top: 92px; }
.hscard .fine2 { font-size: 12px; color: var(--soft); margin-top: 14px; line-height: 1.6; }
.hsform fieldset { max-width: none !important; border: 0; padding: 0; margin: 0; }
.hsform .hs-form-field { margin-bottom: 16px; }
.hsform .hs-form-field > label { display: block; font: 650 12px/1.3 var(--body); letter-spacing: .02em; color: var(--ink); margin-bottom: 7px; }
.hsform .hs-form-required { color: var(--orange); margin-left: 2px; }
.hsform .input { margin: 0 !important; }
.hsform input[type="text"], .hsform input[type="email"], .hsform input[type="tel"], .hsform input[type="number"], .hsform select, .hsform textarea { font: 500 15px/1.4 var(--body); color: var(--ink); background: var(--ground); border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 13px; width: 100% !important; box-sizing: border-box; }
.hsform input:focus, .hsform select:focus, .hsform textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.hsform .form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hsform .form-columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hsform .form-columns-2 .hs-form-field, .hsform .form-columns-3 .hs-form-field { width: auto !important; float: none !important; padding: 0 !important; }
@media (max-width: 520px) { .hsform .form-columns-2, .hsform .form-columns-3 { grid-template-columns: 1fr; } }
.hsform h1, .hsform h2, .hsform h3 { font: 700 19px/1.3 var(--disp); letter-spacing: -.015em; color: var(--ink); margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.hsform fieldset:first-child h1, .hsform fieldset:first-child h2, .hsform fieldset:first-child h3 { margin-top: 0; padding-top: 0; border-top: 0; }
.hsform .hs-field-desc { font-size: 12.5px; line-height: 1.5; color: var(--soft); margin: -3px 0 8px; }
.hsform .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; font: 550 12.5px/1.4 var(--body); color: #c2410c; }
.hsform .legal-consent-container, .hsform .hs-richtext { font-size: 12px; line-height: 1.6; color: var(--soft); margin: 4px 0 12px; }
.hsform .legal-consent-container p, .hsform .hs-richtext p { margin: 0 0 8px; }
.hsform ul.inputs-list { list-style: none; margin: 0; padding: 0; }
.hsform .hs-form-booleancheckbox-display, .hsform .hs-form-checkbox-display { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink); }
.hsform .hs_submit .actions { margin: 6px 0 0; padding: 0; }
.hsform input[type="submit"], .hsform .hs-button { width: 100%; display: inline-flex; justify-content: center; background: var(--blue); color: #fff; font: 600 15px/1 var(--body); padding: 14px 22px; border-radius: 6px; border: 0; cursor: pointer; transition: background .18s, transform .18s; }
.hsform input[type="submit"]:hover, .hsform .hs-button:hover { background: var(--blue-d); transform: translateY(-1px); }
.hsform .submitted-message { font: 600 15px/1.6 var(--body); color: #0b7a48; background: color-mix(in srgb, #0ba05f 10%, transparent); border: 1px solid color-mix(in srgb, #0ba05f 40%, transparent); border-radius: 8px; padding: 16px 18px; }
/* Circled checks in lists: the check is an SVG mask laid exactly over its circle, so it's centered by
   construction (the old rotated-border tick sat low and right). #main beats the same rules in blocks.css
   and in imported HTML sections' CSS (.feat). Circle size and offset per list style. */
#main :is(.trk, .pcard, .plan, .entcols, .prodsec, .panel, .freeband, .feat) li::before,
#main :is(.trk, .pcard, .plan, .entcols, .prodsec, .panel, .freeband, .feat) li::after {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
}
#main :is(.trk, .pcard, .plan, .entcols, .prodsec, .panel, .freeband, .feat) li::after {
  border: 0; transform: none; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.25 8l2.5 2.5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.25 8l2.5 2.5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#main :is(.trk, .pcard, .plan) li::before, #main :is(.trk, .pcard, .plan) li::after { top: 1px; width: 16px; height: 16px; }
#main .entcols li::before, #main .entcols li::after { width: 16px; height: 16px; }
#main .entcols li::after { background: #7cd0ea; }
#main .freeband li::before, #main .freeband li::after { width: 19px; height: 19px; }
#main :is(.trk.dark, .plan.ent) li::after { background: #7cd0ea; }
/* Upcoming events (from the Events calendar) */
.ev { position: relative; }
/* Title leads; presenter / location sit back as smaller, lighter secondary text */
.ev b { font: 700 19px/1.3 var(--disp); letter-spacing: -.02em; color: var(--ink); margin: 2px 0 2px; text-wrap: pretty; }
.ev b a { font: inherit; letter-spacing: inherit; margin: 0; color: inherit; text-decoration: none; }
.ev b a:hover { color: var(--blue); }
.ev > span:not(.k) { font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.ev > span:not(.k) strong { font-weight: 500; color: inherit; }
.ev .evlink { margin-top: auto; padding-top: 8px; }
.ev.is-soon { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--orange); }
.evsoon { align-self: flex-start; font: 650 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); background: color-mix(in srgb, var(--orange) 11%, transparent); border-radius: 999px; padding: 6px 10px; }
.evsoon.is-now { color: #12805c; background: color-mix(in srgb, #12a06e 13%, transparent); }
.evsoon.is-now::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: evpulse 1.6s ease-in-out infinite; }
@keyframes evpulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .evsoon.is-now::before { animation: none; } }
.evempty { color: var(--soft); font-size: 15px; padding: 26px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }
/* Gift card gallery (eGiftSolutions designs) */
.gcbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.gcchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gcchips button { font: 600 13.5px/1 var(--body); color: var(--soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; transition: border-color .15s, color .15s, background .15s; }
.gcchips button span { font: 600 11px/1 var(--mono); color: var(--soft); opacity: .7; }
.gcchips button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.gcchips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.gcchips button[aria-pressed="true"] span { color: var(--ground); }
.gcsearch { position: relative; flex: 0 1 320px; min-width: 220px; }
.gcsearch svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--soft); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.gcsearch input { width: 100%; font: 400 14.5px/1 var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px 11px 38px; }
.gcsearch input:focus { outline: 2px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 1px; border-color: var(--blue); }
.gcgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; }
@media (max-width: 1000px) { .gcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .gcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }
.gccard { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; color: inherit; font: inherit; }
.gcimg { position: relative; display: block; margin-bottom: 10px; border-radius: 4.5% / 7%; overflow: hidden; box-shadow: 0 1px 2px rgba(10,37,64,.12), 0 10px 24px -12px rgba(10,37,64,.35); transition: transform .25s ease, box-shadow .25s ease; }
.gcimg img { display: block; width: 100%; height: auto; aspect-ratio: 85.6 / 54; object-fit: cover; }
.gcimg i { position: absolute; top: 8px; right: 8px; font: 650 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(8,28,51,.78); backdrop-filter: blur(4px); border-radius: 999px; padding: 5px 8px; }
.gccard:hover .gcimg, .gccard:focus-visible .gcimg { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(10,37,64,.12), 0 22px 36px -16px rgba(10,37,64,.45); }
.gccard:focus-visible { outline: none; }
.gccard:focus-visible .gcimg { outline: 2px solid var(--blue); outline-offset: 3px; }
.gccard b { font: 650 15px/1.3 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.gccard > span:last-child { font-size: 12.5px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .gcimg { transition: none; } .gccard:hover .gcimg { transform: none; } }
.gcempty { color: var(--soft); padding: 40px 24px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.gcnote { margin-top: 28px; font-size: 13.5px; color: var(--soft); }
.gcview { border: 0; padding: 0; background: transparent; max-width: min(920px, calc(100vw - 32px)); width: 100%; overflow: visible; }
.gcview::backdrop { background: rgba(6,18,33,.82); backdrop-filter: blur(3px); }
.gcview__in { position: relative; background: var(--card); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.gcview__in > img { display: block; width: 100%; height: auto; border-radius: 4.5% / 7%; box-shadow: 0 2px 6px rgba(10,37,64,.18), 0 24px 48px -20px rgba(10,37,64,.5); }
.gcview__info { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.gcview__info h3 { font: 700 22px/1.2 var(--disp); letter-spacing: -.02em; margin: 0 0 4px; color: var(--ink); }
.gcview__info p { margin: 0; font-size: 14px; color: var(--soft); }
.gcview__x { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.gcview__nav { position: absolute; top: 42%; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transform: translateY(-50%); }
.gcview__nav.is-prev { left: -23px; }
.gcview__nav.is-next { right: -23px; }
.gcview__nav:hover, .gcview__x:hover { background: var(--alt); }
.gcview__count { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font: 600 12px/1 var(--mono); color: rgba(255,255,255,.8); }
@media (max-width: 720px) { .gcview__in { padding: 16px; } .gcview__nav { top: auto; bottom: -62px; transform: none; } .gcview__nav.is-prev { left: calc(50% - 92px); } .gcview__nav.is-next { right: calc(50% - 92px); } .gcview__count { bottom: -48px; } }

/* Feature grid, plain cards: a linked title (e.g. "Your page on egift.online") */
.f b a.ftl, .nf b a.ftl { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.f b a.ftl:hover { color: var(--blue); text-decoration-color: currentColor; }
.nf b a.ftl:hover { text-decoration-color: currentColor; }

/* Spec sheet, interactive bundle (Exatouch "What's included"): numbered items beside one photo.
   --c is the item's highlight color, matching its outline in the photo. */
.bundle { --c: var(--blue); }
.bundle-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bundle-head b { font: 700 17px/1.2 var(--disp); letter-spacing: -.015em; color: var(--ink); }
.bundle-head span { font: 650 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.bundle-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.bundle-list { display: flex; flex-direction: column; gap: 4px; }
.bundle-list [role="tab"] {
  --c: inherit; display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left;
  padding: 14px 16px 14px 13px; border: 0; border-left: 3px solid transparent; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.bundle-list [role="tab"]:hover { background: color-mix(in srgb, var(--c, var(--blue)) 6%, transparent); }
.bundle-list [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bundle-list [role="tab"][aria-selected="true"] {
  background: color-mix(in srgb, var(--c, var(--blue)) 11%, var(--card));
  border-left-color: var(--c, var(--blue));
}
.bundle-list .n {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--line); font: 650 12px/1 var(--mono); color: var(--soft);
  transition: background .2s, border-color .2s, color .2s;
}
.bundle-list [aria-selected="true"] .n { background: var(--c, var(--blue)); border-color: var(--c, var(--blue)); color: #fff; }
.bundle-list .t { display: flex; flex-direction: column; gap: 5px; }
.bundle-list .t b { font: 650 15.5px/1.3 var(--disp); letter-spacing: -.01em; }
.bundle-list .t span { color: var(--soft); font-size: 14px; line-height: 1.55; }
/* Stays beside the list while scrolling, so the photo is in view whichever item is picked */
.bundle-photo { position: sticky; top: 92px; aspect-ratio: 2560 / 2287; }
.bundle-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.bundle-photo img.on { opacity: 1; }
.bundle-note { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-top: 28px; padding: 16px 20px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)); }
.bundle-note b { font: 650 10.5px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.bundle-note span { color: var(--ink); font-size: 14.5px; font-weight: 550; }
@media (prefers-reduced-motion: reduce) { .bundle-photo img, .bundle-list [role="tab"], .bundle-list .n { transition: none; } }
/* Phones and small tablets: the photo stays pinned under the header while tapping through the list */
@media (max-width: 900px) {
  .bundle-body { grid-template-columns: 1fr; gap: 16px; }
  .bundle-photo { order: -1; position: sticky; top: 68px; z-index: 2; background: var(--ground, #fff); max-width: 520px; width: 100%; margin-inline: auto; }
  .bundle-list .t span { font-size: 13.5px; }
}

/* Form dropdowns (contact form and other .field forms): the browser's own arrow ignores padding
   and sits against the border, so draw a chevron with the same inset as the text. #main keeps
   this ahead of a page's own ".field select { background: … }". */
#main .field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 42px;
  background-color: var(--ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7c93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  cursor: pointer;
}