/* Page-level fixes kept apart from the section stylesheets, so a rebuild of one section can't remove them. */

/* Countries: room inside the masked strip for a lifted chip and its shadow (the mask clips at the strip's edge). */
.marquee { margin-block: -28px; }
.marquee-track { padding-block: 36px; }
.marquee-track li:hover { box-shadow: 0 10px 22px -8px rgba(40, 30, 15, .24), 0 2px 4px rgba(40, 30, 15, .05); }
@media (prefers-reduced-motion: reduce) { .marquee { margin-block: 0; } .marquee-track { padding-block: 8px; } }

/* Showcase tool tabs as a sideways row: edge fades and arrows show there's more; a mouse can drag it. */
.tabs-scroller { position: relative; }
.tabs-scroller .show-tabs { --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.tabs-scroller.has-prev .show-tabs { --fl: 56px; }
.tabs-scroller.has-next .show-tabs { --fr: 72px; }
.tabs-scroller.is-scrollable .show-tabs { cursor: grab; }
.tabs-scroller .show-tabs.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tabs-scroller .show-tabs.is-dragging * { pointer-events: none; }
.tabs-arrow { position: absolute; top: calc(50% - 2px); z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
  transform: translateY(-50%) scale(.85); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out); }
.tabs-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tabs-prev { left: calc(var(--gutter) * -1 + 6px); }
.tabs-next { right: calc(var(--gutter) * -1 + 6px); }
/* Arrows on screens with a mouse; touch screens swipe, and the fade shows there's more. */
@media (hover: hover) and (pointer: fine) {
  .tabs-scroller.has-prev .tabs-prev, .tabs-scroller.has-next .tabs-next { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
  .tabs-arrow:hover { background: var(--paper-2); }
}
/* A hint of motion on first view: the row nudges once to show it moves. */
@media (prefers-reduced-motion: no-preference) {
  .tabs-scroller.is-scrollable.nudge .show-tabs > :first-child { animation: tabs-nudge 1.1s var(--ease-out) .4s 1; }
  @keyframes tabs-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(-14px); } }
}

/* Footer: "Made in the Philippines, for the World." shows to visitors in the Philippines only. */
.ph-only { display: none; }
html[data-country="ph"] .ph-only { display: inline; }
.ph-only-block { display: none; }
html[data-country="ph"] .ph-only-block { display: block; }

/* The scroller takes the column's width (not its content's), so the row scrolls instead of overflowing. */
.tabs-scroller { min-width: 0; max-width: 100%; }

/* Pricing card: the billing note and the local-price note read as one small paragraph. */
.price-card .price-fine { font-size: .8rem; line-height: 1.5; margin-top: 14px; }

/* "See all calculators" panel: the clip that animates its height leaves room for the list card's shadow. */
.cat-panel-inner { padding: 0 16px 40px; margin: 0 -16px -40px; }

/* Templates page: a short, lighter description after each template's name. */
.tpl-d { color: var(--ink-3, #8a8378); font-size: .86em; font-weight: 450; }
.tpl-n { font-weight: 550; }
li:has(> .tpl-d) { text-wrap: wrap; }