/* tailwind.css — tailwindcss 3.4.17 + autoprefixer, built by build/assets.js from tailwind.config.js. Do not edit here. */
/* Compiled by build/assets.js with tailwindcss 3.4.17 → site/assets/css/tailwind.css.
   Linked AFTER site.css: the Play CDN appended its sheet as the last \3c style> in <head>,
   so on equal specificity a utility has always won over our component rules. Keeping
   that order is what keeps every approved page identical.

   The Section Library (build/sections/*.css) is compiled here, in the same run, between
   components and utilities: its @apply resolves to the utilities' own values, and a
   utility still comes last. Not in @layer — see build/sections/section-head.css.
   (@import instead of @tailwind: an @import must come first in the file; the output of
   "tailwindcss/base" etc. is exactly what the three @tailwind directives produced.) */

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: #e5e7eb;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: Manrope, system-ui, sans-serif;
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    letter-spacing: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}
button:disabled {
    opacity: .4;
    pointer-events: none;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* ═══ Section Header — the library primitive ════════════════════════════════════════
   Template: build/sections/section-head.js · contract: for now inside the FAQ's
   (build/sections/faq.contract.js); it gets its own when a second component adopts it.

   The head most sections open with: an eyebrow pill (dot + label), the h2, an intro line,
   and optionally a quiet "more" link under it. Four classes an editor can read:

     .section-eyebrow            the pill; its background follows the section it is in
       .section-eyebrow-dot        its dot
       .section-eyebrow-label      its label
     .section-title              the h2
     .section-intro              the intro line
     .section-more               the spacing above the more link (a wrapper <div>, or the link itself)
     .section-link               the quiet more link

   How it is written (the rule for every library component):
   · Compiled in the SAME Tailwind run as the utilities (build/assets/css/tailwind.src.css
     imports this file between components and utilities), with @apply, so every value is
     the utility's own value — the ring + shadow composition included.
   · Outside @layer on purpose: @layer components drops a rule whose class Tailwind has not
     seen in content, and a section that exists only in the CMS would lose its CSS.
   · A property is set by a class OR by a utility on the same element, never both. The
     utilities come after this file, so a stray utility would silently win.
   · Variants are data-* attributes wrapped in :where(), so every selector here weighs
     (0,1,0) like a utility and the later rule wins by order alone.
   · A variant restates each breakpoint it changes: a later base rule overrides an earlier
     @media rule of the same weight, and that is what the variants rely on.
   · Spacing between the parts belongs to the component that hosts the head (see faq.css
     for the FAQ's two models); the defaults below are the common model. */

/* The head as a block of its own, above a section's content (the steps, the feature cards,
   the sources): the parts in one column of readable width, with the gap to the content
   under it. data-measure: the column's width in px — 820 without the attribute; 720 is
   the homepage's head, which also stands closer to its content. A host derives nothing
   else from it. */

.section-head {
    margin-bottom: 2.5rem;
    max-width: 820px;
}

@media (min-width: 640px) {
    .section-head {
        margin-bottom: 3rem;
    }
}

.section-head:where([data-measure="720"]) {
    margin-bottom: 2rem;
    max-width: 720px;
}

@media (min-width: 640px) {
    .section-head:where([data-measure="720"]) {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .section-head:where([data-measure="720"]) {
        margin-bottom: 3rem;
    }
}

.section-head:where([data-measure="760"]) {
    max-width: 760px;
}

.section-head:where([data-measure="860"]) {
    max-width: 860px;
}

.section-eyebrow {
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .section-eyebrow {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .section-eyebrow {
        margin-bottom: 1.5rem;
    }
}

/* The pill is the opposite of its ground, by itself: white on a tint section, tint on a
   white one (the host section carries data-bg). Nobody sets it by hand, so a white pill
   cannot end up on a white section again (Home, AI Detector and API had one). */

:where([data-bg="white"]) .section-eyebrow {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.section-eyebrow-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(243 111 90 / var(--tw-bg-opacity, 1));
}

/* the dot is orange; a host section says data-accent="teal" for the other one */

:where([data-accent="teal"]) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

.section-eyebrow-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .section-eyebrow-label {
        font-size: 10.5px;
    }
}

.section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.section-intro {
    margin-top: 1rem;
    font-size: 14.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .section-intro {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .section-intro {
        margin-top: 1.25rem;
        font-size: 15.5px;
    }
}

/* the intro's longest line, where its column is wider than a line should run */

.section-intro:where([data-measure="64"]) {
    max-width: 64ch;
}

.section-intro:where([data-measure="72"]) {
    max-width: 72ch;
}

/* ON A DARK SURFACE — a host that declares data-surface="dark" (the report showcase, the
   reviews): the pill is translucent, its label and the intro are white at reduced
   strength, the title inherits the host's white. Derived from the host, as the pill's
   tint is on a light one; nobody sets it per head.
   data-tone="quiet" on the same host is the homepage's dark act, a step quieter. */

:where([data-surface="dark"]) .section-eyebrow {
    background-color: rgb(255 255 255 / 0.1);
    --tw-ring-color: rgb(255 255 255 / 0.15);
}

:where([data-surface="dark"]) .section-eyebrow-label {
    color: rgb(255 255 255 / 0.8);
}

:where([data-surface="dark"]) .section-intro {
    color: rgb(255 255 255 / 0.7);
}

:where([data-surface="dark"][data-tone="quiet"]) .section-eyebrow {
    background-color: rgb(255 255 255 / .07);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

:where([data-surface="dark"][data-tone="quiet"]) .section-eyebrow-label {
    color: rgb(255 255 255 / 0.7);
}

:where([data-surface="dark"][data-tone="quiet"]) .section-intro {
    color: rgb(255 255 255 / 0.6);
}

.section-more {
    margin-top: 1.25rem;
}

@media (min-width: 1024px) {
    .section-more {
        margin-top: 1.5rem;
    }
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.section-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .section-link {
        font-size: 13.5px;
    }
}

/* ═══ Action — the library primitive ════════════════════════════════════════════════
   Template: build/sections/action.js · hosted by components (the hero, the steps, the
   feature cards, start free …), not a component of its own: each host's check validates
   the actions it holds (check-tools.js: actionButton, actionLink).
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The in-section actions — smaller than the closing band's (cta-band.css), which is the
   last and largest action of a page:

     a.action-button.btn-press.group     the pill button with the arrow orb; dark
       text                              data-tone="light": white with a hairline ring
       span.action-button-orb.icon-orb   data-tone="ghost": the 48 / 56px ring-only button of
         svg                             the homepage cards
                                         data-tone="inverse": the same size in white, for a
                                         dark section
     a.action-link                      the quiet link beside a button

   The smaller quiet link that stands alone (under a card, at the foot of a section) is
   the Section Header's a.section-link.

   The host spaces its actions from its own side: nothing here carries a margin. */

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.action-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .action-button {
        padding-left: 1.5rem;
        padding-right: 0.5rem;
        font-size: 14.5px;
    }
}

/* the arrow orb is hidden on a phone: the button is its label alone there */

.action-button-orb {
    display: none;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
    .action-button-orb {
        display: flex;
    }
}

.action-button:where([data-tone="light"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.1);
}

.action-button:where([data-tone="light"]):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 242 246 / var(--tw-bg-opacity, 1));
}

:where(.action-button[data-tone="light"]) .action-button-orb {
    background-color: rgb(17 24 39 / 0.1);
}

/* the homepage cards' button: a bare ring at the 48 / 56px size, its orb always shown */

.action-button:where([data-tone="ghost"]) {
    height: 3rem;
    gap: 0.5rem;
    background-color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1.25rem;
    padding-right: 0.625rem;
    font-size: 14px;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.1);
}

.action-button:where([data-tone="ghost"]):hover {
    background-color: rgb(17 24 39 / 0.05);
}

@media (min-width: 640px) {
    .action-button:where([data-tone="ghost"]) {
        height: 3.5rem;
        padding-left: 1.75rem;
        padding-right: 0.625rem;
        font-size: 15px;
    }
}

:where(.action-button[data-tone="ghost"]) .action-button-orb {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    background-color: rgb(17 24 39 / 0.05);
}

/* on a dark section: the same 48 / 56px size, white (the homepage's reviews) */

.action-button:where([data-tone="inverse"]) {
    height: 3rem;
    gap: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1.25rem;
    padding-right: 0.625rem;
    font-size: 14px;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.action-button:where([data-tone="inverse"]):hover {
    background-color: rgb(255 255 255 / 0.9);
}

@media (min-width: 640px) {
    .action-button:where([data-tone="inverse"]) {
        height: 3.5rem;
        padding-left: 1.75rem;
        padding-right: 0.625rem;
        font-size: 15px;
    }
}

:where(.action-button[data-tone="inverse"]) .action-button-orb {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    background-color: rgb(17 24 39 / 0.1);
}

.action-link {
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.action-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .action-link {
        font-size: 14.5px;
    }
}

/* ═══ Icon tile — the library primitive ═════════════════════════════════════════════
   Template: build/sections/icon-tile.js · hosted by components (a step, a feature card,
   a source row, the hero's notice): each host's check validates the tile it holds
   (check-tools.js: iconTile).
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

     span.icon-tile              data-tone="teal|ink|orange|mint"
       svg                       a 20px Lucide icon, stroke="currentColor", copied as it is

   One attribute sets both colours: the tile's wash and the icon's ink. The icon's stroke
   is set HERE, over the <svg>'s own attribute, so an editor never has to keep a hex in
   the icon in step with the tile. */

.icon-tile {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(241 242 246 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .icon-tile {
        border-radius: 14px;
    }
}

@media (min-width: 1024px) {
    .icon-tile {
        border-radius: 1rem;
    }
}

:where(.icon-tile) > svg {
    stroke: #374151;
}

.icon-tile:where([data-tone="teal"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(211 241 246 / var(--tw-bg-opacity, 1));
}

:where(.icon-tile[data-tone="teal"]) > svg {
    stroke: #06748A;
}

.icon-tile:where([data-tone="orange"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(253 229 224 / var(--tw-bg-opacity, 1));
}

:where(.icon-tile[data-tone="orange"]) > svg {
    stroke: #B84431;
}

.icon-tile:where([data-tone="mint"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(220 245 234 / var(--tw-bg-opacity, 1));
}

:where(.icon-tile[data-tone="mint"]) > svg {
    stroke: #1B7A50;
}

/* variant "ring" — the homepage's tile: a hairline in the tone, teal on its lighter wash,
   the tone as the tile's own colour, the same radius at every width */

.icon-tile:where([data-variant="ring"]) {
    display: flex;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 1024px) {
    .icon-tile:where([data-variant="ring"]) {
        border-radius: 14px;
    }
}

.icon-tile:where([data-variant="ring"][data-tone="teal"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(6 116 138 / var(--tw-text-opacity, 1));
    --tw-ring-color: rgb(12 169 195 / 0.15);
}

.icon-tile:where([data-variant="ring"][data-tone="orange"]) {
    --tw-text-opacity: 1;
    color: rgb(184 68 49 / var(--tw-text-opacity, 1));
    --tw-ring-color: rgb(243 111 90 / 0.15);
}

.icon-tile:where([data-variant="ring"][data-tone="mint"]) {
    --tw-text-opacity: 1;
    color: rgb(27 122 80 / var(--tw-text-opacity, 1));
    --tw-ring-color: rgb(58 193 132 / 0.2);
}

/* ═══ Hero — library component ══════════════════════════════════════════════════════
   Template: build/sections/hero.js · contract: build/sections/hero.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv reveals, the .pen-word mark),
   22-hero-title.js (the rising words of [data-hero-title]), 18-pen-mark.js (redraws the
   underline for an edited word), 30-checker.js (the quick-check form in the slot)
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The page's first section, on the tint: a dot field under two glows, the page's H1 with
   one word underlined by the pen mark, and ONE object beside or under it — the real
   checker, or a diagram. Four approved layouts (data-layout on the section):

   section.hero[data-layout="split-aside"]     text + aside left, the checker right (Students, PDF, Turnitin)
     .dot-field.hero-dots  .orb.orb-hero-teal  .orb.orb-hero-coral     the ground, in the section
     .hero-inner
       .hero-grid                              .95fr / 1.05fr, three blocks: on a phone head → checker → aside
         .hero-head.rv                         (.section-eyebrow)  h1.hero-title  p.hero-lead
         .hero-media                           [data-slot="checker"]  p.hero-free
         .hero-aside.rv                        one of: ol.hero-path · .hero-facts (+ p.hero-aside-more) · .hero-notice

   section.hero[data-layout="split"]           the same without an aside, the two columns centred;
                                               .9fr / 1.1fr and a slightly smaller title (the Ukrainian page)

   section.hero[data-layout="hub"]             text left (1.1fr / 1fr), a diagram right (Business, University, Affiliate)
         .hero-head.rv                         (.section-eyebrow)  h1.hero-title  p.hero-lead (1–2)
                                               (.hero-actions > a.action-button, a.action-link)  (p.hero-note)
         .hero-media.rv                        [data-slot="media"] — a diagram or a card, sealed

   section.hero[data-layout="center"]          the homepage: the head centred over the checker
     .hero-bg > .dot-field.hero-dots  .orb.hero-orb-cool  .orb.hero-orb-warm
     .hero-inner
       .hero-head                              h1.hero-title[data-hero-title]  p.hero-lead[data-hero-support]
       [data-slot="checker"]  p.hero-free

   The checker ([data-slot="checker"], build/checker.js) and the diagram
   ([data-slot="media"]) are sealed: rendered by the template, copied as they are, not
   part of what an editor edits. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(242 252 252 / var(--tw-bg-opacity, 1));
    padding-top: 7rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .hero {
        padding-top: 8rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .hero {
        padding-top: 9rem;
        padding-bottom: 6rem;
    }
}

.hero:where([data-layout="center"]) {
    padding-bottom: 3.5rem;
}

@media (min-width: 640px) {
    .hero:where([data-layout="center"]) {
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .hero:where([data-layout="center"]) {
        padding-bottom: 5rem;
    }
}

/* ── the ground ──────────────────────────────────────────────────────────────────
   The dot field first, the glows over it: dots over glow read as dirt on glass. The two
   glows of the split and hub layouts are the site's presets (.orb-hero-teal,
   .orb-hero-coral — 01-base.css). The homepage keeps its own pair, in a clipping layer;
   its cool glow has no fill: the page wrote it with a class Tailwind 3 does not have (an
   opacity of 12), so it was never drawn, and the approved look is the warm glow alone. */

.hero-dots {
    position: absolute;
    inset: 0px;
}

.hero-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}

.hero-orb-cool {
    left: -12rem;
    top: -10rem;
    height: 620px;
    width: 620px;
}

.hero-orb-warm {
    right: -140px;
    top: 10rem;
    height: 520px;
    width: 520px;
    background-color: rgb(243 111 90 / 0.1);
}

/* ── the column and the grid ─────────────────────────────────────────────────── */

.hero-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .hero-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.hero-grid {
    display: grid;
    align-items: flex-start;
    -moz-column-gap: 3.5rem;
    column-gap: 3.5rem;
    row-gap: 2rem;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: .95fr 1.05fr;
        row-gap: 1.75rem;
    }
}

:where(.hero[data-layout="split"]) .hero-grid {
    align-items: center;
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="split"]) .hero-grid {
        grid-template-columns: .9fr 1.1fr;
        row-gap: 2rem;
    }
}

:where(.hero[data-layout="hub"]) .hero-grid {
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="hub"]) .hero-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
    }
}

/* three blocks, not two columns: the DOM order is head → checker → aside, which is what a
   phone shows; from lg the checker takes the right column across both rows */

.hero-head {
    min-width: 0px;
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="split-aside"]) .hero-head {
        grid-column-start: 1;
        grid-row-start: 1;
        padding-top: 1rem;
    }
}

/* with a pill over the title the head starts 8px higher. :has() — a browser without it
   keeps the 16px, which is the same column 8px lower */

@media (min-width: 1024px) {
    :where(.hero[data-layout="split-aside"]) .hero-head:where(:has(> .section-eyebrow)) {
        padding-top: 0.5rem;
    }
}

:where(.hero[data-layout="center"]) .hero-head {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 760px;
    text-align: center;
}

@media (min-width: 640px) {
    :where(.hero[data-layout="center"]) .hero-head {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="center"]) .hero-head {
        margin-bottom: 3rem;
    }
}

.hero-media {
    min-width: 0px;
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="split-aside"]) .hero-media {
        grid-column-start: 2;
        grid-row: span 2 / span 2;
        grid-row-start: 1;
    }
}

.hero-aside {
    min-width: 0px;
}

@media (min-width: 1024px) {
    .hero-aside {
        grid-column-start: 1;
        grid-row-start: 2;
    }
}

/* ── the head ────────────────────────────────────────────────────────────────────
   The pill is the Section Header's (section-head.css): white on the tint, as it is by
   default. In a hero its dot is teal — derived from the host, never set per pill. */

:where(.hero) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

.hero-title {
    margin-bottom: 1rem;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

@media (min-width: 640px) {
    .hero-title {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        margin-bottom: 1.5rem;
    }
}

/* the Ukrainian page's own proportions */

:where(.hero[data-layout="split"]) .hero-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.4rem, 5.2vw, 3.85rem);
    line-height: 1.04;
}

@media (min-width: 640px) {
    :where(.hero[data-layout="split"]) .hero-title {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="split"]) .hero-title {
        margin-bottom: 1.5rem;
    }
}

/* the homepage: the checker is the object, so the title stays at section scale */

:where(.hero[data-layout="center"]) .hero-title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.08;
}

@media (min-width: 640px) {
    :where(.hero[data-layout="center"]) .hero-title {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    :where(.hero[data-layout="center"]) .hero-title {
        margin-bottom: 1.5rem;
    }
}

/* a long title (a sentence, not a name) steps down; after the layouts, so it wins */

.hero-title:where([data-size="long"]) {
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.05;
}

/* the pen mark: the word it underlines, and the line's box */

:where(.hero-title) .pen-word {
    position: relative;
    display: inline-block;
}

.pen-mark {
    position: absolute;
    bottom: -0.5rem;
    left: 0px;
    width: 100%;
}

.hero-lead {
    max-width: 54ch;
    font-size: 15.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-lead {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .hero-lead {
        font-size: 16.5px;
    }
}

:where(.hero-lead) + .hero-lead {
    margin-top: 0.75rem;
}

:where(.hero[data-layout="split"]) .hero-lead {
    max-width: 52ch;
}

:where(.hero[data-layout="hub"]) .hero-lead {
    max-width: 60ch;
}

:where(.hero[data-layout="center"]) .hero-lead {
    max-width: none;
}

/* the actions and the line under them: each carries the gap above itself */

.hero-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .hero-actions {
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .hero-actions {
        margin-top: 2rem;
    }
}

.hero-note {
    margin-top: 1.5rem;
    font-size: 13px;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-note {
        font-size: 13.5px;
    }
}

@media (min-width: 1024px) {
    .hero-note {
        margin-top: 1.75rem;
    }
}

/* ── under the checker: the free line ────────────────────────────────────────── */

.hero-free {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-free {
        margin-top: 1.5rem;
        font-size: 14.5px;
    }
}

/* the Ukrainian line is long: on a phone it wraps, centred, the spark on its first line */

:where(.hero[data-layout="split"]) .hero-free {
    align-items: flex-start;
    text-align: center;
}

@media (min-width: 640px) {
    :where(.hero[data-layout="split"]) .hero-free {
        align-items: center;
    }
}

.hero-free-icon {
    flex-shrink: 0;
}

/* ── the aside: three approved blocks ───────────────────────────────────────────
   ol.hero-path     a path in pills, one of them the current step (Students)
   .hero-facts      three figures over the sentence they come from (PDF), and under the
                    card a quiet link (p.hero-aside-more > a.hero-aside-link)
   .hero-notice     one statement beside an icon tile (Turnitin) */

.hero-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.5rem;
}

.hero-path-step {
    display: flex;
    align-items: center;
}

.hero-path-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 12.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .hero-path-pill {
        font-size: 13px;
    }
}

.hero-path-pill:where([data-state="current"]) {
    box-shadow: none;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hero-path-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

.hero-path-arrow {
    margin-left: 0.375rem;
    margin-right: 0.375rem;
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hero-facts {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .hero-facts {
        border-radius: 1.5rem;
        padding: 1.25rem;
    }
}

.hero-facts-grid {
    margin-bottom: 0.875rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .hero-facts-grid {
        gap: 1rem;
    }
}

.hero-fact {
    min-width: 0px;
}

.hero-fact-value {
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

@media (min-width: 640px) {
    .hero-fact-value {
        font-size: 22px;
    }
}

@media (min-width: 1024px) {
    .hero-fact-value {
        font-size: 24px;
    }
}

.hero-fact-label {
    margin-top: 0.375rem;
    font-size: 11px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-fact-label {
        font-size: 11.5px;
    }
}

.hero-facts-note {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-border-opacity, 1));
    padding-top: 0.875rem;
    font-size: 12.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-facts-note {
        font-size: 13px;
    }
}

.hero-aside-more {
    margin-top: 1rem;
}

.hero-aside-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.hero-aside-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-aside-link {
        font-size: 13.5px;
    }
}

.hero-notice {
    display: flex;
    max-width: 560px;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .hero-notice {
        border-radius: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

.hero-notice-text {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .hero-notice-text {
        font-size: 14.5px;
    }
}

/* ── the measures ───────────────────────────────────────────────────────────────
   The longest line of the lead, in characters. Without the attribute: 54 beside the
   checker (52 on the Ukrainian page), 60 in the hub, none on the homepage. After the
   layouts, so a named measure wins over the layout's default. */

.hero-lead:where([data-measure="52"]) {
    max-width: 52ch;
}

.hero-lead:where([data-measure="54"]) {
    max-width: 54ch;
}

.hero-lead:where([data-measure="60"]) {
    max-width: 60ch;
}

.hero-lead:where([data-measure="62"]) {
    max-width: 62ch;
}

.hero-note:where([data-measure="58"]) {
    max-width: 58ch;
}

/* ═══ Stat rail — library component ═════════════════════════════════════════════════
   Template: build/sections/stat-rail.js · contract: build/sections/stat-rail.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv), 24-odometer.js (.od-num) — nothing of
   its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The thin band of proof under a hero: a few figures or marks in one centred row, each
   with a short label. Not a section with a head — it has no heading of its own.

   section.stat-rail                data-tone="soft"
     .stat-rail-inner
       div.stat-rail-list.rv
         div.stat-rail-item
           div.stat-rail-lead                 a short line over the figure — or, where an item
           (div.stat-rail-gap)                has none, the empty spacer that keeps the figures level
           div.stat-rail-figure               the figure's row: one height for a number and a mark
             div.stat-rail-value(.od-num)     the figure
             img.stat-rail-mark               or a mark, as tall as the row
           div.stat-rail-label                what the figure counts */

.stat-rail {
    position: relative;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .stat-rail {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .stat-rail {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

.stat-rail-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .stat-rail-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .stat-rail-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.stat-rail-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    -moz-column-gap: 3rem;
    column-gap: 3rem;
    row-gap: 2rem;
    text-align: center;
}

@media (min-width: 640px) {
    .stat-rail-list {
        -moz-column-gap: 4rem;
        column-gap: 4rem;
    }
}

@media (min-width: 1024px) {
    .stat-rail-list {
        -moz-column-gap: 6rem;
        column-gap: 6rem;
    }
}

.stat-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* the line over a figure; an item without one holds a spacer of the same height from sm
   up (on a phone the items stack, and the spacer would only be a gap) */

.stat-rail-lead {
    height: 17px;
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .stat-rail-lead {
        font-size: 11.5px;
    }
}

.stat-rail-gap {
    display: none;
    height: 17px;
}

@media (min-width: 640px) {
    .stat-rail-gap {
        display: block;
    }
}

.stat-rail-figure {
    display: flex;
    height: 63px;
    align-items: center;
}

@media (min-width: 640px) {
    .stat-rail-figure {
        height: 78px;
    }
}

@media (min-width: 1024px) {
    .stat-rail-figure {
        height: 90px;
    }
}

.stat-rail-value {
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.stat-rail-mark {
    height: 100%;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.stat-rail-label {
    margin-top: 0.5rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .stat-rail-label {
        font-size: 10.5px;
    }
}

/* the homepage's lighter labels */

:where(.stat-rail[data-tone="soft"]) .stat-rail-lead,
:where(.stat-rail[data-tone="soft"]) .stat-rail-label {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

/* ═══ Steps — library component ═════════════════════════════════════════════════════
   Template: build/sections/steps.js · contract: build/sections/steps.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv, .rv-kids) — nothing of its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   A numbered sequence: what happens, in order. Three approved layouts, each with its own
   item; the switches sit on the section, the list carries what depends on its content.

   section.steps-section            data-layout="rail|cards|rows"   data-marker (by layout, below)
                            data-bg="white|cool|aqua"   data-space="md|lg"   data-accent="teal"
     (.steps-bg > .orb.steps-glow)             one soft glow, on the aqua ground (the homepage)
     .steps-inner
       .section-head.rv                        the Section Header (section-head.css)
       THE LIST — by layout
       (THE FOOT — one of five, below)

   data-layout="rail"       stations on one line (Students, Turnitin, the Ukrainian page)
     ol.steps-list.rv-kids                     data-cols="3|4"   data-last="apart"
       span.steps-line                         the rail
       li.steps-item
         div.steps-marker > span.icon-tile, span.steps-num          data-marker="icon"
         span.steps-disc                                            data-marker="disc": a large numbered disc
         h3.steps-title   p.steps-text

   data-layout="cards"      one card a step (PDF, the homepage, AI Detector, API)
     ol|div.steps-list.rv-kids                 data-cols="3|4"   data-link="line"
       li|div.steps-item
         (span.steps-link)                                          the connector to the next card
         div.steps-marker > span.icon-tile, span.steps-num          data-marker="icon"
         span.icon-tile  div.steps-heading > span.steps-num, p.steps-title     data-marker="icon-stack"
         span.steps-badge                                           data-marker="badge"
         span.steps-marker > span.steps-badge                       data-marker="badge-sm"
         h3.steps-title   p.steps-text

   data-layout="rows"       one sheet, a row a step (Business & Teams, Affiliate)
     div.steps-frame.rv > ol|div.steps-sheet
       li|div.steps-row
         span.steps-num                        the large ghost numeral
         div.steps-row-head                    h3.steps-title (+ div.steps-tags > span.steps-tag); with
                                               data-marker="icon": span.icon-tile + div.steps-row-title > (p.steps-kicker) h3.steps-title
         p.steps-text

   The foot, under the list:
     div.steps-note.rv                         a note panel: .steps-note-text > p.steps-note-line (data-tone="strong"),
                                               .steps-note-action > a.action-button
     div.steps-actions.rv                      one button alone
     div.steps-more.rv                         a line of text and a quiet link: p.steps-more-text, span.steps-more-link > a.section-link
     div.steps-callout.rv                      one statement beside an icon tile: span.icon-tile, p.steps-callout-text
     [data-slot="media"]                       a diagram or panel drawn for the page — sealed

   SURFACES follow the ground (IMAGES.md § 8.5): on a tint a card is white with the
   hairline and the soft shadow; on white a badge card and the note panel take the grey. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.steps-section {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .steps-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .steps-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .steps-section:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.steps-section:where([data-bg="cool"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1));
}

.steps-section:where([data-bg="aqua"]) {
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(242 252 252 / var(--tw-bg-opacity, 1));
}

.steps-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}

.steps-glow {
    right: -160px;
    top: 5rem;
    height: 540px;
    width: 540px;
    background-color: rgb(12 169 195 / 0.1);
}

.steps-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .steps-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .steps-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── the parts every layout shares ───────────────────────────────────────────── */

.steps-list {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .steps-list {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .steps-list {
        gap: 1.5rem;
    }
}

@media (min-width: 640px) {
    .steps-list:where([data-cols="4"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .steps-list:where([data-cols="4"]) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .steps-list:where([data-cols="3"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* the marker row: the icon tile and the step's number */

.steps-marker {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.steps-num {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.steps-title {
    margin-bottom: 0.5rem;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

@media (min-width: 640px) {
    .steps-title {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .steps-title {
        font-size: 19px;
    }
}

.steps-text {
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .steps-text {
        font-size: 14.5px;
    }
}

/* ── layout: cards ───────────────────────────────────────────────────────────── */

:where(.steps-section[data-layout="cards"]) .steps-item {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    :where(.steps-section[data-layout="cards"]) .steps-item {
        border-radius: 20px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="cards"]) .steps-item {
        border-radius: 1.5rem;
        padding: 1.75rem;
    }
}

/* linked cards (PDF): a connector starts at a card's right edge and is exactly as long as
   the grid gap, so it sits between the cards and never runs into one */

.steps-list:where([data-link="line"]) {
    position: relative;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .steps-list:where([data-link="line"]) {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .steps-list:where([data-link="line"]) {
        gap: 1.5rem;
    }
}

:where(.steps-list[data-link="line"]) > .steps-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.steps-link {
    position: absolute;
    top: 50%;
    left: 100%;
    display: none;
    height: 1px;
    width: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
    .steps-link {
        display: block;
    }
}

@media (min-width: 1024px) {
    .steps-link {
        width: 1.5rem;
    }
}

:where(.steps-list[data-link="line"]) .steps-marker {
    margin-bottom: 1.25rem;
    justify-content: space-between;
}

/* marker "icon-stack" — the homepage's card: the tile on top, the number before the title */

.steps-heading {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

:where(.steps-heading) > .steps-num {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

:where(.steps-heading) > .steps-title {
    margin-bottom: 0px;
    font-size: 15.5px;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    :where(.steps-heading) > .steps-title {
        font-size: 16.5px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-heading) > .steps-title {
        font-size: 16.5px;
    }
}

/* markers "badge" and "badge-sm" — a round number instead of an icon. The card is
   rounder; on white it takes the grey and drops the hairline and the shadow. */

.steps-badge {
    margin-bottom: 1rem;
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    font-size: 12.5px;
    font-weight: 700;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

:where(.steps-section[data-marker^="badge"]) .steps-item {
    border-radius: 1.5rem;
}

@media (min-width: 640px) {
    :where(.steps-section[data-marker^="badge"]) .steps-item {
        border-radius: 28px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-marker^="badge"]) .steps-item {
        border-radius: 28px;
    }
}

:where(.steps-section[data-marker^="badge"][data-bg="white"]) .steps-item {
    box-shadow: none;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

:where(.steps-section[data-marker^="badge"]) .steps-title {
    font-size: 15.5px;
}

@media (min-width: 640px) {
    :where(.steps-section[data-marker^="badge"]) .steps-title {
        font-size: 16.5px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-marker^="badge"]) .steps-title {
        font-size: 16.5px;
    }
}

:where(.steps-section[data-marker^="badge"]) .steps-text {
    font-size: 13px;
}

@media (min-width: 640px) {
    :where(.steps-section[data-marker^="badge"]) .steps-text {
        font-size: 13.5px;
    }
}

/* badge-sm (AI Detector): the compact card — a 28px badge, three across from 640px */

@media (min-width: 640px) {
    :where(.steps-section[data-marker="badge-sm"]) .steps-list:where([data-cols="3"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

:where(.steps-section[data-marker="badge-sm"]) .steps-marker {
    margin-bottom: 0.75rem;
    display: inline-flex;
    gap: 0.5rem;
}

:where(.steps-section[data-marker="badge-sm"]) .steps-badge {
    margin-bottom: 0px;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    font-size: 12px;
}

/* ── layout: rail ────────────────────────────────────────────────────────────────
   No cards: the stations sit on one line, each tile ringed in the ground's colour so the
   line stops at it. The line runs from the first station's column to the last one's. */

:where(.steps-section[data-layout="rail"]) .steps-list {
    position: relative;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    :where(.steps-section[data-layout="rail"]) .steps-list {
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="rail"]) .steps-list {
        gap: 2rem;
    }
}

:where(.steps-section[data-layout="rail"]) .steps-list:where([data-cols="3"]) {
    gap: 1.75rem;
}

@media (min-width: 640px) {
    :where(.steps-section[data-layout="rail"]) .steps-list:where([data-cols="3"]) {
        gap: 1.75rem;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="rail"]) .steps-list:where([data-cols="3"]) {
        gap: 2.5rem;
    }
}

.steps-line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 22px;
    display: none;
    height: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
    .steps-line {
        display: block;
    }
}

:where(.steps-list[data-cols="3"]) > .steps-line {
    left: 8%;
    right: 8%;
}

@media (min-width: 768px) {
    :where(.steps-list[data-cols="3"]) > .steps-line {
        display: block;
    }
}

:where(.steps-section[data-layout="rail"]) .steps-item {
    position: relative;
}

:where(.steps-section[data-layout="rail"] .steps-item) .icon-tile {
    position: relative;
    z-index: 1;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

:where(.steps-section[data-layout="rail"][data-bg="cool"] .steps-item) .icon-tile {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(247 250 252 / var(--tw-ring-opacity, 1));
}

/* on the cool ground the number covers the line behind it */

:where(.steps-section[data-layout="rail"][data-bg="cool"]) .steps-num {
    position: relative;
    z-index: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1));
    padding-right: 0.75rem;
}

:where(.steps-section[data-layout="rail"]) .steps-title {
    margin-bottom: 0.375rem;
    font-size: 16px;
}

@media (min-width: 640px) {
    :where(.steps-section[data-layout="rail"]) .steps-title {
        font-size: 17px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="rail"]) .steps-title {
        font-size: 17px;
    }
}

:where(.steps-section[data-layout="rail"]) .steps-text {
    max-width: 36ch;
}

:where(.steps-section[data-layout="rail"] .steps-list[data-cols="3"]) .steps-text {
    max-width: 44ch;
}

/* the last station apart (the Ukrainian page): a separate act, so it is drawn dashed and
   the rail stops before it; this page's own gap, and no cap on the text */

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="rail"]) .steps-list:where([data-last="apart"]) {
        gap: 1.75rem;
    }
}

:where(.steps-list[data-last="apart"]) > .steps-line {
    left: 6%;
    right: 31%;
}

:where(.steps-section[data-layout="rail"] .steps-list[data-last="apart"]) .steps-text {
    max-width: none;
}

:where(.steps-section[data-layout="rail"] .steps-list[data-last="apart"]) > .steps-item:where(:last-child) {
    border-radius: 1rem;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.7);
    padding: 1.25rem;
}

@media (min-width: 640px) {
    :where(.steps-section[data-layout="rail"] .steps-list[data-last="apart"]) > .steps-item:where(:last-child) {
        border-radius: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="rail"] .steps-list[data-last="apart"]) > .steps-item:where(:last-child) {
        margin: -1.25rem;
        padding: 1.25rem;
    }
}

:where(.steps-section[data-layout="rail"] .steps-list[data-last="apart"] > .steps-item:last-child) .icon-tile {
    box-shadow: none;
}

:where(.steps-section[data-layout="rail"] .steps-list[data-last="apart"] > .steps-item:last-child) .steps-num {
    background-color: transparent;
    padding-right: 0px;
}

/* marker "disc" — a large numbered disc on the rail; the last one is the dark one */

:where(.steps-section[data-marker="disc"]) .steps-list {
    gap: 2rem;
}

@media (min-width: 640px) {
    :where(.steps-section[data-marker="disc"]) .steps-list {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-marker="disc"]) .steps-list {
        gap: 3rem;
    }
}

:where(.steps-section[data-marker="disc"]) .steps-line {
    left: 0px;
    right: 0px;
    top: 27px;
}

.steps-disc {
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
    display: inline-flex;
    height: 54px;
    width: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(211 241 246 / var(--tw-bg-opacity, 1));
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(4 85 102 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

:where(.steps-item:last-child) > .steps-disc {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

:where(.steps-section[data-marker="disc"]) .steps-title {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 17px;
}

@media (min-width: 640px) {
    :where(.steps-section[data-marker="disc"]) .steps-title {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-marker="disc"]) .steps-title {
        font-size: 19px;
    }
}

/* the rail of discs stands a little further from its head */

@media (min-width: 1024px) {
    :where(.steps-section[data-marker="disc"]) .section-head {
        margin-bottom: 3.5rem;
    }
}

/* ── layout: rows ────────────────────────────────────────────────────────────────
   One sheet in the double bezel, a hairline between the rows; each row: the ghost
   numeral, the step's name, its text. */

.steps-frame {
    border-radius: 1.5rem;
    background-color: rgb(0 0 0 / .02);
    padding: 0.375rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .steps-frame {
        border-radius: 2rem;
        padding: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .steps-frame {
        border-radius: 2.5rem;
    }
}

.steps-sheet > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    --tw-divide-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-divide-opacity, 1));
}

.steps-sheet {
    border-radius: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
    .steps-sheet {
        border-radius: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .steps-sheet {
        border-radius: calc(2.5rem - 0.5rem);
    }
}

.steps-row {
    display: grid;
    align-items: flex-start;
    gap: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .steps-row {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .steps-row {
        grid-template-columns: 5rem 1fr 1.35fr;
        gap: 2rem;
        padding-left: 2.25rem;
        padding-right: 2.25rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

:where(.steps-row) > .steps-num {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.steps-row-head {
    min-width: 0px;
}

/* with an icon tile the head is a row: the tile, then the step's label and name */

:where(.steps-section[data-layout="rows"][data-marker="icon"]) .steps-row-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.steps-row-title {
    min-width: 0px;
}

.steps-kicker {
    margin-bottom: 0.25rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .steps-kicker {
        font-size: 10.5px;
    }
}

:where(.steps-row) .steps-title {
    margin-bottom: 0px;
    font-size: 19px;
}

@media (min-width: 640px) {
    :where(.steps-row) .steps-title {
        font-size: 21px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-row) .steps-title {
        font-size: 22px;
    }
}

/* the name carries the gap to the tags under it */

:where(.steps-row) .steps-title:where(:not(:last-child)) {
    margin-bottom: 0.75rem;
}

.steps-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.steps-tag {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 12px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

:where(.steps-row) > .steps-text {
    font-size: 14.5px;
}

@media (min-width: 640px) {
    :where(.steps-row) > .steps-text {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    :where(.steps-row) > .steps-text {
        font-size: 15.5px;
    }
}

/* ── the foot ────────────────────────────────────────────────────────────────────
   Each foot carries the gap above itself. */

.steps-note {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .steps-note {
        margin-top: 1.75rem;
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        border-radius: 20px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .steps-note {
        margin-top: 2rem;
        border-radius: 1.5rem;
        padding: 1.75rem;
    }
}

:where(.steps-section[data-bg="white"]) .steps-note {
    box-shadow: none;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

:where(.steps-section[data-layout="rail"]) .steps-note {
    margin-top: 2rem;
}

@media (min-width: 640px) {
    :where(.steps-section[data-layout="rail"]) .steps-note {
        margin-top: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.steps-section[data-layout="rail"]) .steps-note {
        margin-top: 3rem;
    }
}

.steps-note-text {
    min-width: 0px;
}

.steps-note-line {
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .steps-note-line {
        font-size: 14.5px;
    }
}

.steps-note-line:where(:not(:last-child)) {
    margin-bottom: 0.375rem;
}

.steps-note-line:where([data-tone="strong"]) {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.steps-note-action {
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .steps-note-action {
        margin-left: auto;
    }
}

.steps-actions {
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .steps-actions {
        margin-top: 2.5rem;
    }
}

.steps-more {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .steps-more {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .steps-more {
        margin-top: 2rem;
    }
}

.steps-more-text {
    max-width: 62ch;
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .steps-more-text {
        font-size: 14.5px;
    }
}

.steps-more-link {
    flex-shrink: 0;
}

.steps-callout {
    margin-top: 2.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(254 244 241 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(251 201 191 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {
    .steps-callout {
        margin-top: 3rem;
        border-radius: 1.5rem;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .steps-callout {
        padding: 1.75rem;
    }
}

.steps-callout-text {
    max-width: 88ch;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .steps-callout-text {
        font-size: 15.5px;
    }
}

@media (min-width: 1024px) {
    .steps-callout-text {
        font-size: 16px;
    }
}

/* ═══ Feature cards — library component ═════════════════════════════════════════════
   Template: build/sections/feature-cards.js · contract: build/sections/feature-cards.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv, .rv-kids) — nothing of its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   An unnumbered set of things of equal rank — what the product keeps, offers or is for —
   each an icon, a name and a few lines. Two layouts (data-layout on the section):

   section.cards-section    data-layout="grid|panel"   data-bg="white|cool|aqua"   data-space="sm|md|lg"
                            data-accent="teal"   data-size="compact|lead"
     .cards-inner
       (.section-head.rv)                      the Section Header (section-head.css)

   data-layout="grid"       separate cards (PDF, API, the homepage, Affiliate)
       div.cards-grid.rv-kids                  data-cols="3|4"
         div.cards-item                        data-tone="teal": the accent card
           span.icon-tile   h3.cards-title   p.cards-text (may hold a.cards-link)
           (div.cards-item-action > a.action-button)        with data-size="lead"
       div.cards-grid.rv[data-head="inline"]   the head is the grid's first cell (Affiliate):
         div.cards-head-cell > h2.section-title, p.section-intro      then the cards
       (div.cards-actions.rv > a.action-button)             one button under the grid

   data-layout="panel"      cells of one sheet, hairlines between them (Business & Teams, Affiliate)
       div.cards-panel.rv
         div.cards-cells > div.cards-cell      span.icon-tile   h3.cards-title   p.cards-text
         (div.cards-panel-foot > p.cards-panel-note, span.cards-panel-action > a.action-button)

   data-size="compact"      the API page's card: a flat tile on the tone's lightest wash, the smaller text
   data-size="lead"         the homepage's card: the ringed tile, a larger name, a button at its foot

   SURFACES follow the ground (IMAGES.md § 8.5): a card is white with the hairline and the
   soft shadow; the panel is the grey sheet with white tiles, for a white section. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.cards-section {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .cards-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .cards-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .cards-section:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.cards-section:where([data-space="sm"]) {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 640px) {
    .cards-section:where([data-space="sm"]) {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .cards-section:where([data-space="sm"]) {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

.cards-section:where([data-bg="cool"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1));
}

.cards-section:where([data-bg="aqua"]) {
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(242 252 252 / var(--tw-bg-opacity, 1));
}

.cards-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .cards-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cards-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── layout: grid ────────────────────────────────────────────────────────────── */

.cards-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cards-grid {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .cards-grid {
        gap: 1.5rem;
    }
}

@media (min-width: 640px) {
    .cards-grid:where([data-cols="4"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cards-grid:where([data-cols="4"]) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .cards-grid:where([data-cols="3"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cards-item {
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .cards-item {
        border-radius: 28px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cards-item {
        padding: 1.75rem;
    }
}

/* the accent card: the one of the set that is a different kind of thing */

.cards-item:where([data-tone="teal"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-color: rgb(9 145 168 / 0.1);
}

.cards-title {
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

@media (min-width: 640px) {
    .cards-title {
        font-size: 17px;
    }
}

.cards-text {
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cards-text {
        font-size: 14.5px;
    }
}

/* a link inside a card's text */

.cards-link {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.cards-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* the head as the grid's first cell: two cards a row from 640px, three from 1024px, the
   head taking the first place; the roomier card and the larger name of three across */

@media (min-width: 640px) {
    .cards-grid:where([data-head="inline"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .cards-grid:where([data-head="inline"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cards-grid:where([data-head="inline"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.cards-head-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.25rem;
}

@media (min-width: 640px) {
    .cards-head-cell {
        grid-column: span 2 / span 2;
        padding: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .cards-head-cell {
        grid-column: span 1 / span 1;
        padding-right: 1.5rem;
    }
}

:where(.cards-grid[data-head="inline"]) > .cards-item {
    padding: 1.5rem;
}

@media (min-width: 640px) {
    :where(.cards-grid[data-head="inline"]) > .cards-item {
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    :where(.cards-grid[data-head="inline"]) > .cards-item {
        padding: 1.75rem;
    }

    :where(.cards-grid[data-head="inline"]) .cards-title {
        font-size: 18px;
    }
}

/* one button under the grid */

.cards-actions {
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .cards-actions {
        margin-top: 2rem;
    }
}

/* ── layout: panel ───────────────────────────────────────────────────────────── */

.cards-panel {
    overflow: hidden;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .cards-panel {
        border-radius: 2rem;
    }
}

.cards-cells {
    display: grid;
}

.cards-cells > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    border-color: rgb(229 231 235 / 0.7);
}

@media (min-width: 768px) {
    .cards-cells {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards-cells > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0;
        border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
        --tw-divide-x-reverse: 0;
        border-right-width: calc(1px * var(--tw-divide-x-reverse));
        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
}

.cards-cell {
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .cards-cell {
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .cards-cell {
        padding: 2rem;
    }
}

/* on the grey sheet a tile is white with a hairline; its icon keeps the tone's ink */

:where(.cards-panel) .icon-tile {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 1024px) {
    :where(.cards-cell) > .cards-title {
        font-size: 18px;
    }
}

.cards-panel-foot {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top-width: 1px;
    border-color: rgb(229 231 235 / 0.7);
    background-color: rgb(255 255 255 / 0.6);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .cards-panel-foot {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .cards-panel-foot {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.cards-panel-note {
    min-width: 0px;
    flex: 1 1 0%;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cards-panel-note {
        font-size: 14.5px;
    }
}

.cards-panel-action {
    flex-shrink: 0;
}

/* ── size: compact — the API page's card ─────────────────────────────────────────
   A flat tile on the tone's lightest wash with the icon one shade lighter, the name
   directly under it, the text at the page's smaller size. */

:where(.cards-section[data-size="compact"]) .icon-tile {
    margin-bottom: 1rem;
    display: flex;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    :where(.cards-section[data-size="compact"]) .icon-tile {
        border-radius: 0.75rem;
    }
}

@media (min-width: 1024px) {
    :where(.cards-section[data-size="compact"]) .icon-tile {
        border-radius: 0.75rem;
    }
}

:where(.cards-section[data-size="compact"]) .icon-tile > svg {
    stroke: #4B5563;
}

:where(.cards-section[data-size="compact"]) .icon-tile:where([data-tone="teal"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
}

:where(.cards-section[data-size="compact"]) .icon-tile:where([data-tone="teal"]) > svg {
    stroke: #0991A8;
}

:where(.cards-section[data-size="compact"]) .icon-tile:where([data-tone="orange"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(254 244 241 / var(--tw-bg-opacity, 1));
}

:where(.cards-section[data-size="compact"]) .icon-tile:where([data-tone="orange"]) > svg {
    stroke: #DC5A45;
}

:where(.cards-section[data-size="compact"]) .icon-tile:where([data-tone="mint"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(237 250 244 / var(--tw-bg-opacity, 1));
}

:where(.cards-section[data-size="compact"]) .icon-tile:where([data-tone="mint"]) > svg {
    stroke: #2AA46C;
}

:where(.cards-section[data-size="compact"]) .cards-title {
    margin-top: 0px;
    margin-bottom: 0.625rem;
}

:where(.cards-section[data-size="compact"]) .cards-text {
    font-size: 13px;
}

@media (min-width: 640px) {
    :where(.cards-section[data-size="compact"]) .cards-text {
        font-size: 13.5px;
    }
}

/* ── size: lead — the homepage's card ────────────────────────────────────────────
   The homepage's card radius, the ringed tile (icon-tile.css, data-variant="ring"), a
   name at lead scale, and the card's own action pinned to its foot. */

:where(.cards-section[data-size="lead"]) > .cards-inner {
    position: static;
}

:where(.cards-section[data-size="lead"]) .cards-item {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
}

@media (min-width: 640px) {
    :where(.cards-section[data-size="lead"]) .cards-item {
        border-radius: 20px;
    }
}

@media (min-width: 1024px) {
    :where(.cards-section[data-size="lead"]) .cards-item {
        border-radius: 1.5rem;
    }
}

:where(.cards-section[data-size="lead"]) .cards-title {
    margin-bottom: 0.75rem;
    font-size: 17.5px;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    :where(.cards-section[data-size="lead"]) .cards-title {
        font-size: 19px;
    }
}

@media (min-width: 1024px) {
    :where(.cards-section[data-size="lead"]) .cards-title {
        font-size: 20px;
    }
}

:where(.cards-section[data-size="lead"]) .cards-text {
    margin-bottom: 1.5rem;
}

.cards-item-action {
    margin-top: auto;
}

/* ═══ Sources — library component ═══════════════════════════════════════════════════
   Template: build/sections/sources.js · contract: build/sections/sources.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv, .rv-kids) — nothing of its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   What a check is compared against, and what it can leave out: the source collections and
   the scan settings. Shown as a list of what is available — ticks and tiles, never
   switches: the page cannot act on a control that moves. Four approved layouts
   (data-layout on the section):

   section.sources-section  data-layout="groups|flow|list|cells"   data-bg="white|cool"
                            data-space="md|lg"   data-accent="teal"   data-items="labels"

   data-layout="groups"     two groups of ticks and the coverage figure (Home, Students)
     .sources-inner
       .section-head.rv
       div.sources-grid.rv-kids
         div.sources-group ×2                  .sources-group-head > span.icon-tile, span.sources-kicker
           ul.sources-list > li.sources-item   svg.sources-tick, then
                                               span.sources-item-body > span.sources-item-title, span.sources-item-text
                                               or, with data-items="labels" on the section, span.sources-label
         div.sources-stat                      span.sources-stat-icon, div.sources-stat-value, p.sources-stat-text
       (div.sources-notes.rv > p.sources-note) one or two notes; data-tone="warm": the one to act on

   data-layout="flow"       an input, an arrow, one group of ticks (PDF)
       div.sources-flow.rv > [data-slot="media"], div.sources-arrow, div.sources-group

   data-layout="list"       the head beside one sheet of rows (Turnitin)
       div.sources-split
         div.sources-aside.rv                  the Section Header's parts, sticky from lg
         div.sources-frame.rv > div.sources-sheet
           dl.sources-rows > div.sources-row   span.icon-tile, div.sources-row-body > dt.sources-term, dd.sources-desc
           (p.sources-foot > span.sources-foot-icon, span.sources-foot-text)

   data-layout="cells"      the head over one sheet of four cells (the Ukrainian page)
       .section-head.rv
       div.sources-frame.rv > dl.sources-cells.cells
         div.sources-cell                      .sources-cell-head > span.icon-tile, span.sources-kicker
                                               dt.sources-term, dd.sources-desc */

/* ── the section ─────────────────────────────────────────────────────────────── */

.sources-section {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .sources-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .sources-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .sources-section:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.sources-section:where([data-bg="cool"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1));
}

.sources-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .sources-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sources-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── a group of ticks: the card the groups and the flow share ─────────────────── */

.sources-group {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .sources-group {
        border-radius: 20px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sources-group {
        border-radius: 1.5rem;
        padding: 1.75rem;
    }
}

.sources-group-head {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sources-kicker {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-kicker {
        font-size: 10.5px;
    }
}

:where(.sources-section:not([data-items="labels"])) .sources-list > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    --tw-divide-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-divide-opacity, 1));
}

.sources-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.sources-tick {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.sources-item-body {
    min-width: 0px;
}

.sources-item-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-item-title {
        font-size: 15px;
    }
}

.sources-item-text {
    margin-top: 0.125rem;
    display: block;
    font-size: 13px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-item-text {
        font-size: 13.5px;
    }
}

/* ── layout: groups ──────────────────────────────────────────────────────────── */

.sources-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .sources-grid {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .sources-grid {
        grid-template-columns: 1fr 1fr .85fr;
        gap: 1.5rem;
    }
}

/* the coverage figure: the one dark card of the row */

.sources-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-stat {
        border-radius: 20px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sources-stat {
        border-radius: 1.5rem;
        padding: 1.75rem;
    }
}

.sources-stat-icon {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: rgb(255 255 255 / 0.1);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.15);
}

@media (min-width: 640px) {
    .sources-stat-icon {
        border-radius: 14px;
    }
}

.sources-stat-value {
    font-variant-numeric: tabular-nums;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.sources-stat-text {
    font-size: 13.5px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.6);
}

@media (min-width: 640px) {
    .sources-stat-text {
        font-size: 14.5px;
    }
}

.sources-notes {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .sources-notes {
        margin-top: 1.25rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .sources-notes {
        margin-top: 1.5rem;
        gap: 1.5rem;
    }
}

.sources-note {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .sources-note {
        border-radius: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        font-size: 14.5px;
    }
}

.sources-note:where([data-tone="warm"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(254 244 241 / var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(251 201 191 / var(--tw-ring-opacity, 1));
}

/* items "labels" — the homepage's groups: a tick and a label, no description; the ringed
   tile, a lighter kicker further from the list, a slightly wider figure card, and the
   homepage's container, which is not positioned */

:where(.sources-section[data-items="labels"]) > .sources-inner {
    position: static;
}

@media (min-width: 1024px) {
    :where(.sources-section[data-items="labels"]) .sources-grid {
        grid-template-columns: 1fr 1fr .9fr;
    }
}

:where(.sources-section[data-items="labels"]) .sources-group-head {
    margin-bottom: 1.25rem;
}

:where(.sources-section[data-items="labels"]) .sources-kicker {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

:where(.sources-section[data-items="labels"]) .sources-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

:where(.sources-section[data-items="labels"]) .sources-item {
    align-items: center;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

:where(.sources-section[data-items="labels"]) .sources-tick {
    margin-top: 0px;
}

.sources-label {
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-label {
        font-size: 14.5px;
    }
}

:where(.sources-section[data-items="labels"]) .sources-stat-icon {
    display: flex;
}

/* ── layout: flow ────────────────────────────────────────────────────────────── */

.sources-flow {
    display: grid;
    align-items: center;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .sources-flow {
        grid-template-columns: .7fr 3rem 1.3fr;
        gap: 0px;
    }
}

.sources-arrow {
    display: none;
    align-items: center;
}

@media (min-width: 1024px) {
    .sources-arrow {
        display: flex;
    }
}

.sources-arrow-line {
    height: 1px;
    flex: 1 1 0%;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.sources-arrow-head {
    margin-left: -0.375rem;
    flex-shrink: 0;
}

:where(.sources-flow) .sources-group-head {
    margin-bottom: 0.5rem;
}

/* ── the sheet the list and the cells share ──────────────────────────────────── */

.sources-frame {
    border-radius: 1.5rem;
    background-color: rgb(0 0 0 / .02);
    padding: 0.375rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .sources-frame {
        border-radius: 28px;
        padding: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .sources-frame {
        border-radius: 2rem;
    }
}

.sources-term {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-term {
        font-size: 16.5px;
    }
}

.sources-desc {
    margin-top: 0.25rem;
    max-width: 62ch;
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-desc {
        font-size: 14.5px;
    }
}

/* ── layout: list ────────────────────────────────────────────────────────────── */

.sources-split {
    display: grid;
    align-items: flex-start;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .sources-split {
        grid-template-columns: .85fr 1.15fr;
        gap: 3.5rem;
    }

    .sources-aside {
        position: -webkit-sticky;
        position: sticky;
        top: 7rem;
    }
}

.sources-sheet {
    overflow: hidden;
    border-radius: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
    .sources-sheet {
        border-radius: 20px;
    }
}

@media (min-width: 1024px) {
    .sources-sheet {
        border-radius: calc(2rem - 0.5rem);
    }
}

.sources-rows > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    --tw-divide-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-divide-opacity, 1));
}

.sources-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .sources-row {
        gap: 1.25rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sources-row {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

.sources-row-body {
    min-width: 0px;
}

/* the sheet's dark last line: what the list is, and is not, about */

.sources-foot {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sources-foot {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .sources-foot {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

.sources-foot-icon {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* ── layout: cells ───────────────────────────────────────────────────────────────
   The hairlines between the cells are .cells (13-cells.css): the class stays on the <dl>. */

.sources-cells {
    display: grid;
    overflow: hidden;
    border-radius: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
    .sources-cells {
        border-radius: 20px;
    }
}

@media (min-width: 768px) {
    .sources-cells {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sources-cells {
        border-radius: calc(2rem - 0.5rem);
    }
}

.sources-cell {
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .sources-cell {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sources-cell {
        padding: 2rem;
    }
}

.sources-cell-head {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

:where(.sources-cell-head) > .sources-kicker {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

:where(.sources-cell) > .sources-term {
    font-size: 16.5px;
    color: inherit;
}

@media (min-width: 640px) {
    :where(.sources-cell) > .sources-term {
        font-size: 18px;
    }
}

:where(.sources-cell) > .sources-desc {
    margin-top: 0.375rem;
    max-width: 52ch;
}

/* ═══ Start free — library component ════════════════════════════════════════════════
   Template: build/sections/start-free.js · contract: build/sections/start-free.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv, .rv-kids); 30-checker.js puts the caret
   in the checker when the button's anchor holds one — nothing of its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The free entry: what can be checked without paying, as two figures — one light, one
   dark — beside the sentence that states them, a button back to the checker and a quiet
   link to the prices. Never a price or a matrix. Two approved layouts:

   section.start-free       data-layout="open|framed"   data-bg="white"   data-space="md|lg"
     .start-free-inner
       data-layout="open"   (Students, the Ukrainian page) text and figures side by side, 1fr / 1fr
         div.start-free-grid
           div.start-free-text.rv
           div.start-free-figures.rv-kids
       data-layout="framed" (PDF) the same in one double-bezel sheet, 1.1fr / .9fr, smaller figures
         div.start-free-frame.rv > div.start-free-grid
           div.start-free-text
           div.start-free-figures              + p.start-free-note (a line under the two figures)

       div.start-free-text                     (.section-eyebrow)  h2.section-title  p.section-intro (1–2)
                                               div.start-free-actions > a.action-button, a.section-link
       div.start-free-figure                   data-tone="teal|dark"
         p.start-free-value   p.start-free-label   p.start-free-sub */

/* ── the section ─────────────────────────────────────────────────────────────── */

.start-free {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .start-free {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .start-free {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .start-free:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.start-free-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .start-free-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .start-free-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.start-free-grid {
    display: grid;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .start-free-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
}

/* ── the text ────────────────────────────────────────────────────────────────────
   The Section Header's parts (section-head.css); in this section the pill's dot is teal —
   derived from the host, never set per pill. A second paragraph stands closer. */

.start-free-text {
    min-width: 0px;
}

:where(.start-free) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

:where(.start-free-text .section-intro) + .section-intro {
    margin-top: 0.75rem;
}

@media (min-width: 1024px) {
    :where(.start-free-text .section-intro) + .section-intro {
        margin-top: 0.75rem;
    }
}

.start-free-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .start-free-actions {
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .start-free-actions {
        margin-top: 2rem;
    }
}

/* the Ukrainian page (the md rhythm): its action row is a step wider */

@media (min-width: 640px) {
    :where(.start-free[data-space="md"]) .start-free-actions {
        gap: 1.25rem;
    }
}

/* ── the figures ─────────────────────────────────────────────────────────────── */

.start-free-figures {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .start-free-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.start-free-figure {
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(9 145 168 / 0.1);
}

@media (min-width: 640px) {
    .start-free-figure {
        border-radius: 2rem;
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .start-free-figure {
        padding: 2rem;
    }
}

.start-free-figure:where([data-tone="dark"]) {
    box-shadow: none;
    --tw-bg-opacity: 1;
    background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.start-free-value {
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    --tw-text-opacity: 1;
    color: rgb(4 85 102 / var(--tw-text-opacity, 1));
}

.start-free-label {
    margin-top: 0.75rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    --tw-text-opacity: 1;
    color: rgb(6 116 138 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .start-free-label {
        font-size: 10.5px;
    }
}

.start-free-sub {
    margin-top: 0.75rem;
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .start-free-sub {
        font-size: 14.5px;
    }
}

:where(.start-free-figure[data-tone="dark"]) .start-free-value {
    color: inherit;
}

:where(.start-free-figure[data-tone="dark"]) .start-free-label,
:where(.start-free-figure[data-tone="dark"]) .start-free-sub {
    color: rgb(255 255 255 / 0.6);
}

/* ── layout: framed ──────────────────────────────────────────────────────────── */

.start-free-frame {
    border-radius: 1.5rem;
    background-color: rgb(0 0 0 / .02);
    padding: 0.375rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .start-free-frame {
        border-radius: 2rem;
        padding: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .start-free-frame {
        border-radius: 2.5rem;
    }
}

:where(.start-free[data-layout="framed"]) .start-free-grid {
    border-radius: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
    :where(.start-free[data-layout="framed"]) .start-free-grid {
        border-radius: 1.5rem;
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    :where(.start-free[data-layout="framed"]) .start-free-grid {
        grid-template-columns: 1.1fr .9fr;
        gap: 3rem;
        border-radius: calc(2.5rem - 0.5rem);
        padding: 2.5rem;
    }
}

:where(.start-free[data-layout="framed"]) .section-intro {
    max-width: 56ch;
}

:where(.start-free[data-layout="framed"]) .start-free-figures {
    min-width: 0px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    :where(.start-free[data-layout="framed"]) .start-free-figures {
        gap: 1rem;
    }
}

:where(.start-free[data-layout="framed"]) .start-free-figure {
    border-radius: 1rem;
    padding: 1.25rem;
}

@media (min-width: 640px) {
    :where(.start-free[data-layout="framed"]) .start-free-figure {
        border-radius: 1.5rem;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.start-free[data-layout="framed"]) .start-free-figure {
        padding: 1.5rem;
    }
}

:where(.start-free[data-layout="framed"]) .start-free-value {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

:where(.start-free[data-layout="framed"]) .start-free-sub {
    margin-top: 0.5rem;
    font-size: 12.5px;
    line-height: 1.5;
}

@media (min-width: 640px) {
    :where(.start-free[data-layout="framed"]) .start-free-sub {
        font-size: 13px;
    }
}

.start-free-note {
    grid-column: span 2 / span 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .start-free-note {
        font-size: 13px;
    }
}

/* ═══ Pricing preview — library component ═══════════════════════════════════════════
   Template: build/sections/pricing-preview.js · contract: build/sections/pricing-preview.contract.js
   Behaviour: build/assets/js/60-pricing.js ([data-pricing]: the period switch),
   20-motion.js (.rv) — nothing of its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The plans, previewed on a page that is not the Pricing page. Only the frame is here:
   the period switch and the plan cards are the pricing widget's two sealed blocks
   (build/pricing.js renders them with their own markup; 17-pricing.css holds the tabs'
   states). No figure is styled, named or held by this file.

   section.pricing-preview          data-layout="center|split"   data-bg="tint"   data-space="md|lg"
                                    data-accent="teal"   data-pricing="onetime"   data-pricing-animate
     (div.orb.pricing-glow)                     center only
     .pricing-inner
       THE HEAD     center: div.section-head.rv, centred                      (section-head.css)
                    split:  div.pricing-top > div.pricing-top-head.rv (the head's parts),
                            p.pricing-aside.rv > span.pricing-aside-icon > svg, span.pricing-aside-text
       [data-slot="pricing-periods"]            the period switch — sealed
       [data-slot="pricing-plans"]              the plan cards, the feature-line template and
                                                the JSON island — sealed
       THE FOOT     center: div.pricing-foot.rv > span.pricing-note[data-period-note],
                            span.pricing-foot-dot, a.pricing-link
                    split:  div.pricing-actions.rv > a.action-button[data-tone="light"] */

/* ── the section ─────────────────────────────────────────────────────────────── */

.pricing-preview {
    position: relative;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .pricing-preview {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .pricing-preview {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .pricing-preview:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* the homepage's glow. It has no fill: the homepage wrote it with a class Tailwind 3 does
   not have (an opacity of 8), so it was never drawn — the approved ground is the plain
   tint, and the element stays as the approved page has it. */

.pricing-glow {
    right: -140px;
    top: 2.5rem;
    height: 520px;
    width: 520px;
}

.pricing-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .pricing-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .pricing-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── the head ────────────────────────────────────────────────────────────────── */

/* center: a short centred column */

:where(.pricing-preview[data-layout="center"]) .section-head {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 560px;
    text-align: center;
}

@media (min-width: 640px) {
    :where(.pricing-preview[data-layout="center"]) .section-head {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.pricing-preview[data-layout="center"]) .section-head {
        margin-bottom: 3rem;
    }
}

/* split: the head beside a note card */

.pricing-top {
    margin-bottom: 2rem;
    display: grid;
    align-items: flex-end;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .pricing-top {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .pricing-top {
        margin-bottom: 3rem;
        grid-template-columns: 1fr .8fr;
        gap: 3.5rem;
    }
}

.pricing-top-head {
    min-width: 0px;
}

.pricing-aside {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .pricing-aside {
        border-radius: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        font-size: 14.5px;
    }
}

.pricing-aside-icon {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

:where(.pricing-aside-icon) > svg {
    stroke: #DC5A45;
}

/* ── the foot ────────────────────────────────────────────────────────────────── */

/* center: the period's note, a separator, a quiet link */

.pricing-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    font-size: 12.5px;
    font-weight: 500;
}

@media (min-width: 640px) {
    .pricing-foot {
        font-size: 13px;
    }
}

.pricing-note {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.pricing-foot-dot {
    display: none;
    height: 0.25rem;
    width: 0.25rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .pricing-foot-dot {
        display: block;
    }
}

.pricing-link {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.pricing-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-color: #6B7280;
    text-decoration-color: #6B7280;
}

/* ═══ Reviews — library component ═══════════════════════════════════════════════════
   Template: build/sections/reviews.js · contract: build/sections/reviews.contract.js
   Behaviour: build/assets/js/45-carousel.js ([data-carousel]), 44-review-rating.js
   (.review-rating[data-rating]), 20-motion.js (.rv, .rv-kids)
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   Customers quoted: a head and a set of review cards. Two approved layouts; the card is
   one, and takes its skin from the section's surface.

   section.reviews-section          data-layout="carousel|grid"   data-space="md|lg"
                                    data-surface="dark" (carousel) | data-bg="tint" (grid)
                                    data-accent="teal"   data-tone="quiet"   data-carousel
     (div.reviews-bg > div.orb.reviews-glow)          the dark section's ground
     .reviews-inner
       carousel   div.reviews-top.rv > div.section-head                the head, in the rail's top row
                  div.reviews-rail.rv
                    div.reviews-track[data-carousel-track]             the cards, one row, scrolling
                      div.reviews-item > figure.review-card
                    button.reviews-nav[data-carousel-prev]  button.reviews-nav[data-carousel-next]
                  div.reviews-dots[data-carousel-dots]                 the script draws .rev-dot buttons here
                  (div.reviews-actions.rv > a.action-button[data-tone="inverse"])
       grid       div.section-head.rv
                  div.reviews-grid.rv-kids > div.reviews-item > figure.review-card

   figure.review-card
     div.review-source              img.review-source-mark, span.review-source-name,
                                    span.review-rating[data-rating] > span.review-stars (ten <svg>, in
                                    span.review-stars-base and span.review-stars-lit > span.review-stars-row),
                                    span.review-rating-value
     blockquote.review-quote
     figcaption.review-by           span.review-author, a.review-link

   The carousel's rules came here from 23-carousel.css with the component (the rail was
   .rev-track, the arrows .rev-nav); .rev-dot stays the name 45-carousel.js writes. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.reviews-section {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .reviews-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .reviews-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .reviews-section:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.reviews-section:where([data-surface="dark"]) {
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* the dark section's ground. Its glow has no fill: the homepage wrote it with a class
   Tailwind 3 does not have (an opacity of 12), so it was never drawn — the approved
   ground is the plain dark, and the block stays as the approved page has it. */

.reviews-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}

.reviews-glow {
    left: -160px;
    bottom: -140px;
    height: 560px;
    width: 560px;
}

.reviews-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .reviews-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .reviews-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── the head ────────────────────────────────────────────────────────────────── */

:where(.reviews-section) .section-head {
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    :where(.reviews-section) .section-head {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.reviews-section) .section-head {
        margin-bottom: 3rem;
    }
}

/* carousel: the head is the first column of the rail's top row, which carries the gap */

.reviews-top {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .reviews-top {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .reviews-top {
        margin-bottom: 3rem;
    }
}

:where(.reviews-top) > .section-head {
    margin-bottom: 0px;
}

@media (min-width: 640px) {
    :where(.reviews-top) > .section-head {
        margin-bottom: 0px;
    }
}

@media (min-width: 1024px) {
    :where(.reviews-top) > .section-head {
        margin-bottom: 0px;
    }
}

/* ── layout: grid ────────────────────────────────────────────────────────────── */

.reviews-grid {
    display: grid;
    align-items: stretch;
    gap: 1rem;
}

@media (min-width: 640px) {
    .reviews-grid {
        gap: 1.25rem;
    }
}

@media (min-width: 768px) {
    .reviews-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .reviews-grid {
        gap: 1.5rem;
    }
}

.reviews-item {
    display: flex;
}

/* ── layout: carousel ────────────────────────────────────────────────────────────
   The rail runs the full viewport; the reading zone stays the container's. A mask
   dissolves the cards from the screen edge to where the content column starts, so
   resting cards sit in the 1200px zone at full strength and their neighbours peek from
   inside the fade. --rev-edge is screen edge to content edge: the centring gap plus the
   container gutter. Card width is pinned to the content zone, not the track, so three
   rest inside the column exactly. scroll-padding keeps the snap points on the content
   edge rather than the track edge. */

.reviews-rail {
    position: relative;
}

.reviews-track {
    --rev-edge: calc(max((100vw - 1280px) / 2, 0px) + 16px);
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--rev-edge);
    scroll-padding-inline: var(--rev-edge);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--rev-edge), #000 calc(100% - var(--rev-edge)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--rev-edge), #000 calc(100% - var(--rev-edge)), transparent);
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
    gap: 1rem;
    overflow-x: auto;
}

@media (min-width: 640px) {
    .reviews-track {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .reviews-track {
        gap: 1.5rem;
    }
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

:where(.reviews-track) > .reviews-item {
    flex-basis: 86%;
    flex-shrink: 0;
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .reviews-track {
        --rev-edge: calc(max((100vw - 1280px) / 2, 0px) + 24px);
    }

    :where(.reviews-track) > .reviews-item {
        flex-basis: 54%;
    }
}

@media (min-width: 1024px) {
    .reviews-track {
        --rev-edge: calc(max((100vw - 1280px) / 2, 0px) + 40px);
    }

    :where(.reviews-track) > .reviews-item {
        flex-basis: calc((min(100vw, 1280px) - 80px - 3rem) / 3);
    }
}

/* the arrows are a hover affordance, but focus reaches them too, or the control is
   mouse-only; hidden entirely when there is nothing to scroll */

.reviews-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.32, .72, 0, 1);
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 32px 64px -16px rgba(0, 0, 0, .12);
    --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color), 0 32px 64px -16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.reviews-nav:where([data-carousel-prev]) {
    left: 0px;
}

@media (min-width: 640px) {
    .reviews-nav:where([data-carousel-prev]) {
        left: -0.5rem;
    }
}

@media (min-width: 1024px) {
    .reviews-nav:where([data-carousel-prev]) {
        left: -1.25rem;
    }
}

.reviews-nav:where([data-carousel-next]) {
    right: 0px;
}

@media (min-width: 640px) {
    .reviews-nav:where([data-carousel-next]) {
        right: -0.5rem;
    }
}

@media (min-width: 1024px) {
    .reviews-nav:where([data-carousel-next]) {
        right: -1.25rem;
    }
}

.reviews-rail:hover .reviews-nav, .reviews-nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.reviews-nav[hidden] {
    display: none;
}

.reviews-nav:hover {
    transform: translateY(-50%) scale(1.06);
}

@media (hover: none) {
    .reviews-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

.reviews-dots {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .reviews-dots {
        margin-top: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .reviews-dots {
        margin-top: 2rem;
    }
}

.rev-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    transition: width .3s cubic-bezier(.32, .72, 0, 1), background-color .3s ease;
}

.rev-dot.on {
    width: 22px;
    background: #fff;
}

.reviews-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@media (min-width: 640px) {
    .reviews-actions {
        margin-top: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .reviews-actions {
        margin-top: 3rem;
    }
}

/* ── the card ────────────────────────────────────────────────────────────────────
   One card, two skins: white with the hairline and the soft shadow on a light section,
   translucent on the dark one — taken from the section's surface, never set per card. */

.review-card {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .review-card {
        border-radius: 20px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .review-card {
        border-radius: 1.5rem;
        padding: 1.75rem;
    }
}

:where([data-surface="dark"]) .review-card {
    background-color: rgb(255 255 255 / .06);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

.review-source {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.review-source-mark {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
}

.review-source-name {
    font-size: 11px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .review-source-name {
        font-size: 11.5px;
    }
}

:where([data-surface="dark"]) .review-source-name {
    color: rgb(255 255 255 / 0.6);
}

/* the rating: two rows of five stars, the lit one clipped to the rating. The lit row sits
   in a box narrowed to the rating and must be CLIPPED by it, never fitted to it: w-max on
   the row and no shrinking on a star keep the two rows in register, so 4.5 reads as four
   and a half. The width comes from data-rating — one attribute, no inline style. */

.review-rating {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-stars {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.review-stars-base {
    display: flex;
    gap: 1px;
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

:where([data-surface="dark"]) .review-stars-base {
    color: rgb(255 255 255 / 0.2);
}

.review-stars-lit {
    width: 0;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    --tw-text-opacity: 1;
    color: rgb(243 111 90 / var(--tw-text-opacity, 1));
}

.review-stars-row {
    display: flex;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    gap: 1px;
}

:where(.review-stars) svg {
    flex-shrink: 0;
}

:where(.review-rating[data-rating="1"]) .review-stars-lit {
    width: 20%;
}

:where(.review-rating[data-rating="1.5"]) .review-stars-lit {
    width: 30%;
}

:where(.review-rating[data-rating="2"]) .review-stars-lit {
    width: 40%;
}

:where(.review-rating[data-rating="2.5"]) .review-stars-lit {
    width: 50%;
}

:where(.review-rating[data-rating="3"]) .review-stars-lit {
    width: 60%;
}

:where(.review-rating[data-rating="3.5"]) .review-stars-lit {
    width: 70%;
}

:where(.review-rating[data-rating="4"]) .review-stars-lit {
    width: 80%;
}

:where(.review-rating[data-rating="4.5"]) .review-stars-lit {
    width: 90%;
}

:where(.review-rating[data-rating="5"]) .review-stars-lit {
    width: 100%;
}

.review-rating-value {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

:where([data-surface="dark"]) .review-rating-value {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.review-quote {
    margin-bottom: 1.25rem;
    flex: 1 1 0%;
    font-size: 14.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .review-quote {
        font-size: 15.5px;
    }
}

:where([data-surface="dark"]) .review-quote {
    color: rgb(255 255 255 / 0.85);
}

.review-by {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
}

:where([data-surface="dark"]) .review-by {
    border-color: rgb(255 255 255 / 0.1);
}

.review-author {
    font-size: 12.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .review-author {
        font-size: 13px;
    }
}

:where([data-surface="dark"]) .review-author {
    color: rgb(255 255 255 / 0.7);
}

.review-link {
    font-size: 11.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.review-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

:where([data-surface="dark"]) .review-link {
    color: rgb(255 255 255 / 0.45);
}

:where([data-surface="dark"]) .review-link:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ═══ Report showcase — library component ═══════════════════════════════════════════
   Template: build/sections/report-showcase.js · contract: build/sections/report-showcase.contract.js
   Behaviour: build/assets/js/40-report.js ([data-report]), 42-report-pass.js (the
   homepage's scan), 20-motion.js (.rv, .rv-kids, .pen-word) — nothing of its own
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The section that shows the plagiarism report: a head, the report, and a few lines on
   how to read it. The report is the product's screen — a sealed block the template
   renders (build/report.js, 09-report.css); everything around it is the page's text.

   section.report-showcase          data-surface="dark" | data-bg="white"   data-space="md|lg"
                                    data-accent="teal"   data-tone="quiet"
     DARK   div.orb.orb-dark-teal  div.orb.orb-dark-coral            the two glows (01-base.css)
            data-tone="quiet": div.report-bg > div.orb.report-orb-cool, div.orb.report-orb-warm
     .report-inner
       THE HEAD     div.section-head.rv                              the Section Header (section-head.css)
                    or div.report-top > div.report-top-head.rv (the head's parts),
                       ol.report-path.rv > li.report-path-step > span.report-path-pill (+ svg.report-path-arrow)
       THE REPORT   [data-slot="report"]                             sealed
       THE FOOT     dark, each optional, in this order:
                    ol.report-points.rv[data-marker="number"]        li.report-point > span.report-point-num,
                                                                     span.report-point-body > span.report-point-name, span.report-point-text
                    div.report-callout.rv                            span.report-callout-icon > svg, p.report-callout-text
                    div.report-pair.rv (data-split="tail")           two cards: div.report-principle · div.report-callout ·
                                                                     p.report-aside · div.report-statement
                    p.report-caveat.rv                               svg.report-caveat-icon, text
                    [data-slot="media"]                              a page's own block — sealed
                    light:
                    div.report-foot                                  ul.report-points.rv-kids[data-marker="icon"] >
                                                                     li.report-point > span.icon-tile, h3.report-point-name, p.report-point-text
                                                                     div.report-callout.rv[data-tone="orange"] > span.icon-tile, p.report-callout-text

   The dark head — the pill, its label and the intro on the dark ground — is the Section
   Header's own (section-head.css, [data-surface="dark"]); nothing here restates it. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.report-showcase {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .report-showcase {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .report-showcase {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .report-showcase:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.report-showcase:where([data-surface="dark"]) {
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* the homepage's ground: one warm glow low on the right. The cool one has no fill — the
   homepage wrote it with a class Tailwind 3 does not have (an opacity of 12), so it was
   never drawn, and the approved look is the warm glow alone. */

.report-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}

.report-orb-cool {
    left: -13rem;
    top: 2.5rem;
    height: 620px;
    width: 620px;
}

.report-orb-warm {
    right: -160px;
    bottom: -120px;
    height: 520px;
    width: 520px;
    background-color: rgb(243 111 90 / 0.1);
}

.report-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .report-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .report-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── the head ────────────────────────────────────────────────────────────────────
   The Section Header block, a step closer to the report than to an ordinary section's
   content; a second intro paragraph stands closer and, on the dark ground, quieter. */

:where(.report-showcase) .section-head {
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    :where(.report-showcase) .section-head {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.report-showcase) .section-head {
        margin-bottom: 3rem;
    }
}

:where(.report-showcase .section-intro) + .section-intro {
    margin-top: 0.75rem;
}

:where(.report-showcase[data-surface="dark"] .section-intro) + .section-intro {
    color: rgb(255 255 255 / 0.6);
}

:where(.report-showcase) .pen-word {
    position: relative;
    display: inline-block;
}

/* the head beside a path in pills (the Ukrainian page) */

.report-top {
    margin-bottom: 2rem;
    display: grid;
    align-items: flex-end;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .report-top {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .report-top {
        margin-bottom: 3rem;
        grid-template-columns: 1.15fr .85fr;
        gap: 3.5rem;
    }
}

.report-top-head {
    min-width: 0px;
}

.report-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.5rem;
}

@media (min-width: 1024px) {
    .report-path {
        justify-content: flex-end;
    }
}

.report-path-step {
    display: flex;
    align-items: center;
}

.report-path-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / .06);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    color: rgb(255 255 255 / 0.85);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
    .report-path-pill {
        font-size: 13.5px;
    }
}

.report-path-pill:where([data-state="current"]) {
    background-color: rgb(243 111 90 / 0.15);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-ring-color: rgb(245 137 113 / 0.4);
}

.report-path-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(245 137 113 / var(--tw-bg-opacity, 1));
}

.report-path-arrow {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color: rgb(255 255 255 / 0.3);
}

/* ── the foot, on the dark ground ────────────────────────────────────────────────
   Each block carries the gap above itself. */

/* three numbered points, one strip */

.report-points:where([data-marker="number"]) {
    margin-top: 1.5rem;
    display: grid;
}

.report-points:where([data-marker="number"]) > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    border-color: rgb(255 255 255 / 0.1);
}

.report-points:where([data-marker="number"]) {
    border-radius: 1rem;
    background-color: rgb(255 255 255 / .05);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
    .report-points:where([data-marker="number"]) {
        margin-top: 2rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-points:where([data-marker="number"]) > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0;
        border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
        --tw-divide-x-reverse: 0;
        border-right-width: calc(1px * var(--tw-divide-x-reverse));
        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }

    .report-points:where([data-marker="number"]) {
        border-radius: 1.5rem;
    }
}

:where(.report-points[data-marker="number"]) > .report-point {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 640px) {
    :where(.report-points[data-marker="number"]) > .report-point {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

.report-point-num {
    display: inline-flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    font-size: 12px;
    font-weight: 700;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.report-point-body {
    min-width: 0px;
}

:where(.report-points[data-marker="number"]) .report-point-name {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    :where(.report-points[data-marker="number"]) .report-point-name {
        font-size: 15px;
    }
}

:where(.report-points[data-marker="number"]) .report-point-text {
    margin-top: 0.125rem;
    display: block;
    font-size: 12.5px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.6);
}

@media (min-width: 640px) {
    :where(.report-points[data-marker="number"]) .report-point-text {
        font-size: 13px;
    }
}

/* the teal callout: one statement beside an icon */

.report-callout {
    margin-top: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1.5rem;
    background-color: rgb(44 195 219 / .07);
    padding: 1.25rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(44 195 219 / 0.25);
}

@media (min-width: 640px) {
    .report-callout {
        margin-top: 1.5rem;
        gap: 1.25rem;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .report-callout {
        padding: 1.75rem;
    }
}

.report-callout-icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: rgb(44 195 219 / 0.15);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(44 195 219 / 0.3);
}

@media (min-width: 640px) {
    .report-callout-icon {
        height: 2.75rem;
        width: 2.75rem;
    }
}

:where(.report-callout-icon) > svg {
    stroke: #6ED7E8;
}

.report-callout-text {
    max-width: 76ch;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .report-callout-text {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .report-callout-text {
        font-size: 15.5px;
    }
}

/* two cards side by side: the first the wider one; data-split="tail": the second */

.report-pair {
    margin-top: 1.5rem;
    display: grid;
    align-items: stretch;
    gap: 1rem;
}

@media (min-width: 640px) {
    .report-pair {
        margin-top: 2rem;
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .report-pair {
        grid-template-columns: 1.15fr .85fr;
        gap: 1.5rem;
    }

    .report-pair:where([data-split="tail"]) {
        grid-template-columns: .85fr 1.15fr;
    }
}

/* the callout as a card of the pair: the pair's radius and padding, the whole width */

:where(.report-pair) > .report-callout {
    margin-top: 0px;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    :where(.report-pair) > .report-callout {
        margin-top: 0px;
        border-radius: 2rem;
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    :where(.report-pair) > .report-callout {
        padding: 2rem;
    }
}

:where(.report-pair > .report-callout) > .report-callout-text {
    max-width: none;
}

/* the white display card: a label, the statement at display size, a paragraph */

.report-principle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .report-principle {
        border-radius: 2rem;
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .report-principle {
        padding: 2.5rem;
    }
}

.report-kicker {
    margin-bottom: 1rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .report-kicker {
        font-size: 10.5px;
    }
}

.report-principle-title {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

/* the statement carries the gap to the paragraph under it */

.report-principle-title:where(:not(:last-child)) {
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .report-principle-title:where(:not(:last-child)) {
        margin-bottom: 1.25rem;
    }
}

.report-principle-text {
    max-width: 60ch;
    font-size: 14.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .report-principle-text {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .report-principle-text {
        font-size: 15.5px;
    }
}

/* a quiet text card */

.report-aside {
    display: flex;
    align-items: center;
    border-radius: 1.5rem;
    background-color: rgb(255 255 255 / .05);
    padding: 1.5rem;
    font-size: 14.5px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.75);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
    .report-aside {
        border-radius: 2rem;
        padding: 1.75rem;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .report-aside {
        padding: 2rem;
        font-size: 15.5px;
    }
}

/* a white card: an icon tile and one statement */

.report-statement {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .report-statement {
        gap: 1.25rem;
        border-radius: 2rem;
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .report-statement {
        padding: 2rem;
    }
}

.report-statement-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.625;
    letter-spacing: -0.025em;
}

@media (min-width: 640px) {
    .report-statement-text {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .report-statement-text {
        font-size: 17px;
    }
}

/* a footnote under the report */

.report-caveat {
    margin-top: 2rem;
    display: flex;
    max-width: 76ch;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 12.5px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.45);
}

@media (min-width: 640px) {
    .report-caveat {
        margin-top: 2.5rem;
        font-size: 13px;
    }
}

.report-caveat-icon {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
}

/* ── the foot, on the white section ──────────────────────────────────────────────
   Three points with icon tiles beside the orange callout. */

.report-foot {
    margin-top: 2rem;
    display: grid;
    align-items: stretch;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .report-foot {
        margin-top: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .report-foot {
        grid-template-columns: 1.5fr 1fr;
        gap: 2.5rem;
    }
}

.report-points:where([data-marker="icon"]) {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .report-points:where([data-marker="icon"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

:where(.report-points[data-marker="icon"]) .report-point-name {
    margin-top: 1rem;
    margin-bottom: 0.375rem;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

@media (min-width: 640px) {
    :where(.report-points[data-marker="icon"]) .report-point-name {
        font-size: 16.5px;
    }
}

:where(.report-points[data-marker="icon"]) .report-point-text {
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    :where(.report-points[data-marker="icon"]) .report-point-text {
        font-size: 14.5px;
    }
}

.report-callout:where([data-tone="orange"]) {
    margin-top: 0px;
    align-items: center;
    gap: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(254 244 241 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(251 201 191 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {
    .report-callout:where([data-tone="orange"]) {
        margin-top: 0px;
        gap: 1rem;
        border-radius: 2rem;
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .report-callout:where([data-tone="orange"]) {
        padding: 1.75rem;
    }
}

:where(.report-callout[data-tone="orange"]) > .report-callout-text {
    max-width: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    :where(.report-callout[data-tone="orange"]) > .report-callout-text {
        font-size: 17.5px;
    }
}

@media (min-width: 1024px) {
    :where(.report-callout[data-tone="orange"]) > .report-callout-text {
        font-size: 19px;
    }
}

/* ═══ FAQ — library component ═══════════════════════════════════════════════════════
   Template: build/sections/faq.js · contract: build/sections/faq.contract.js
   Behaviour: build/assets/js/50-faq.js ([data-faq], .faq-item, .faq-q, .open)
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   section.faq                 data-bg="white|tint"  data-space="md|lg"  data-layout="fluid|fluid-narrow|fixed"
     .faq-inner                the 1280px container
       .faq-grid               head column + list column
         .faq-aside            the sticky head column (Section Header inside)
         .faq-frame            the soft outer frame     data-variant="doc" when used on its own in a guide
           .faq-list[data-faq]
             .faq-item(.open)
               (.faq-heading)  optional heading (h3) around the button
               button.faq-q  > .faq-q-text + .faq-chev(svg)
               .faq-a#id > div > .faq-a-body
                                p.faq-a-body — a one-paragraph answer
                                div.faq-a-body > p, p … (p.faq-a-more > a.faq-a-link) — a rich answer

   Two other roots, for the FAQ inside another component: the grid alone (.faq-grid with
   data-layout, the user guide) and the frame alone (.faq-frame, the Moodle guide). The
   layout selectors below therefore match the variant on .faq OR on a root .faq-grid. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.faq {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .faq {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .faq {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .faq:where([data-space="md"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.faq:where([data-bg="tint"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.faq-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .faq-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .faq-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── the grid: three approved layouts ───────────────────────────────────────────
   fluid          0.85fr / 1.15fr — the product pages
   fluid-narrow   0.8fr / 1.2fr   — the Ukrainian page
   fixed          380px / 1fr     — the homepage and the user guide; its head keeps the
                  homepage's spacing model (the title carries the gap, the intro none),
                  its link sits bare under the intro, and its container is not positioned */

.faq-grid {
    display: grid;
    align-items: flex-start;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .faq-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 3.5rem;
    }

    :where(.faq[data-layout="fluid-narrow"]) .faq-grid,
    .faq-grid:where([data-layout="fluid-narrow"]) {
        grid-template-columns: 0.8fr 1.2fr;
    }
}

:where(.faq[data-layout="fixed"]) .faq-grid,
.faq-grid:where([data-layout="fixed"]) {
    gap: 2.5rem;
}

@media (min-width: 640px) {
    :where(.faq[data-layout="fixed"]) .faq-grid,
    .faq-grid:where([data-layout="fixed"]) {
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    :where(.faq[data-layout="fixed"]) .faq-grid,
    .faq-grid:where([data-layout="fixed"]) {
        grid-template-columns: 380px 1fr;
        gap: 3.5rem;
    }
}

:where(.faq[data-layout="fixed"]) > .faq-inner {
    position: static;
}

@media (min-width: 1024px) {
    .faq-aside {
        position: -webkit-sticky;
        position: sticky;
        top: 7rem;
    }

    :where(.faq[data-layout="fixed"], .faq-grid[data-layout="fixed"]) .faq-aside {
        top: 8rem;
    }
}

:where(.faq[data-layout="fixed"], .faq-grid[data-layout="fixed"]) .section-title {
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    :where(.faq[data-layout="fixed"], .faq-grid[data-layout="fixed"]) .section-title {
        margin-bottom: 1.25rem;
    }
}

:where(.faq[data-layout="fixed"], .faq-grid[data-layout="fixed"]) .section-intro {
    margin-top: 0px;
}

@media (min-width: 1024px) {
    :where(.faq[data-layout="fixed"], .faq-grid[data-layout="fixed"]) .section-intro {
        margin-top: 0px;
    }
}

/* ── the list ────────────────────────────────────────────────────────────────── */

.faq-frame {
    border-radius: 1.5rem;
    background-color: rgb(0 0 0 / .02);
    padding: 0.375rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .faq-frame {
        border-radius: 28px;
        padding: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .faq-frame {
        border-radius: 2rem;
    }
}

.faq-list > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    --tw-divide-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-divide-opacity, 1));
}

.faq-list {
    overflow: hidden;
    border-radius: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
    .faq-list {
        border-radius: 20px;
    }
}

@media (min-width: 1024px) {
    .faq-list {
        border-radius: calc(2rem - 0.5rem);
    }
}

.faq-heading {
    margin: 0px;
}

.faq-q {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

@media (min-width: 640px) {
    .faq-q {
        gap: 1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .faq-q {
        gap: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.faq-q-text {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.faq-chev {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}

.faq-a-body {
    max-width: 72ch;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .faq-a-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .faq-a-body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 1.75rem;
    }
}

/* the answer text: the one paragraph itself, or each paragraph of a rich answer except
   the follow-up link's own */

p.faq-a-body,
.faq-a-body > p:not(.faq-a-more) {
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    p.faq-a-body,
    .faq-a-body > p:not(.faq-a-more) {
        font-size: 14.5px;
    }
}

.faq-a-body > p + p {
    margin-top: 0.75rem;
}

/* a link inside the answer text */

.faq-link {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.faq-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* the follow-up link under a rich answer (an official source, a place in the product) */

.faq-a-link {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 13px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.faq-a-link:hover {
    --tw-text-opacity: 1;
    color: rgb(10 14 26 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .faq-a-link {
        font-size: 13.5px;
    }
}

.faq-a-link-icon {
    margin-top: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

/* ── variant: doc — the list alone in a guide's reading column ───────────────────
   It keeps the phone/tablet sizes from lg up (the column is narrow) and uses the guide's
   body colour and link. */

@media (min-width: 1024px) {
    .faq-frame:where([data-variant="doc"]) {
        border-radius: 28px;
    }

    :where(.faq-frame[data-variant="doc"]) .faq-list {
        border-radius: 20px;
    }

    :where(.faq-frame[data-variant="doc"]) .faq-q {
        gap: 1.25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    :where(.faq-frame[data-variant="doc"]) .faq-a-body {
        padding-bottom: 1.5rem;
    }
}

:where(.faq-frame[data-variant="doc"]) p.faq-a-body,
:where(.faq-frame[data-variant="doc"]) .faq-a-body > p:not(.faq-a-more) {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

:where(.faq-frame[data-variant="doc"]) .faq-a-link {
    align-items: center;
    font-size: 13.5px;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

:where(.faq-frame[data-variant="doc"]) .faq-a-link:hover {
    -webkit-text-decoration-color: #6B7280;
    text-decoration-color: #6B7280;
}

@media (min-width: 640px) {
    :where(.faq-frame[data-variant="doc"]) .faq-a-link {
        font-size: 14px;
    }
}

:where(.faq-frame[data-variant="doc"]) .faq-a-link-icon {
    margin-top: 0px;
}

/* ── behaviour: the accordion (moved from build/assets/css/03-faq.css) ─────────────
   Every answer is in the HTML. Collapsing is an enhancement: without JS (no .js on
   <html>) every answer stays open, so none is locked behind a button that cannot work. */

.faq-a {
    display: grid;
    grid-template-rows:0fr;
    transition: grid-template-rows .5s cubic-bezier(.32, .72, 0, 1);
}

.faq-item.open .faq-a {
    grid-template-rows:1fr;
}

.faq-a > div {
    overflow: hidden;
}

/* The chevron sits in a 32px round chip: grey until its answer is open, then the accent,
   so the colour follows a click. One look on every page (2026-09-30). The transition keeps
   the transform in its list, or the rotation would lose its easing. */

.faq-chev {
    background: #F1F2F6;
    color: #4B5563;
    transition: transform .45s cubic-bezier(.32, .72, 0, 1), background-color .3s ease, color .3s ease;
}

.faq-item.open .faq-chev {
    transform: rotate(180deg);
    background: #FDE5E0;
    color: #B84431;
}

:where(html:not(.js)) .faq-a {
    grid-template-rows:1fr;
}

:where(html:not(.js)) .faq-chev {
    transform: rotate(180deg);
}

/* ═══ CTA band — library component ══════════════════════════════════════════════════
   Template: build/sections/cta-band.js · contract: build/sections/cta-band.contract.js
   Behaviour: build/assets/js/20-motion.js (.rv reveals, the .ring-word mark)
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The closing band — the last section before the footer. Two approved looks:

   section.cta-band                         the signature band (every brief-built page)
     .cta-band-bg                           the ground: dot field under two masked glows
       .dot-field.cta-band-dots  .orb.cta-glow-warm  .orb.cta-glow-cool
     .cta-band-inner                        the centred column      data-width="wide" on the section: 920px
       (.section-eyebrow.rv)                the pill, with a pulsing dot
       (p.cta-kicker.rv)                    a line ABOVE the title (instead of a lead under it)
       h2.cta-title.rv                      hero scale, one .ring-word in it
       (p.cta-lead.rv)                      data-measure="52|56|58|62|560px"
       .cta-actions.rv                      data-layout="stack|pair" (none: a row)
         a.cta-button > (svg) text span.cta-button-orb.icon-orb
         (a.cta-link)                       a quiet link beside the button          (row)
         (p.cta-hint > svg.cta-hint-icon)   a line with the spark under the button  (stack)
         (a.cta-button-secondary)           the second, light button               (pair)
       (p.cta-note.rv)                      a line under the actions   data-tone="quiet": small, grey, may hold a.cta-note-link

   section.cta-band[data-variant="plain"]   the older pages' band (Help Center, Mission, the free tools …)
     .orb.cta-orb-warm  .orb.cta-orb-cool   two soft glows straight in the section, no dot field
     .cta-band-inner
       h2.cta-title.rv                      section scale, no ring mark
       p.cta-lead.rv                        data-measure="46|52|54"
       a.cta-button.rv                      data-tone="orange" (none: teal); 48 / 56px

   THE SIGNATURE BAND HAS FOUR PARTS, and all four are load-bearing (DESIGN.md § The
   closing CTA band):
   1. DOT FIELD, 22px cell, under the glows — dots over glow read as dirt on glass.
   2. TWO GLOWS, warm upper-left and cool lower-right: masked gradients on a solid fill,
      never blur(). Every knob is a custom property on .cta-band, and the two media
      queries are not optional: the warm glow is 1138px wide, three viewports of coral on
      a 390px phone.
   3. ONE RING MARK in the heading: the closing act loops a word instead of underlining it.
      The loop is drawn for a fragment of about ten characters.
   4. The heading at HERO scale — the one place a non-hero heading is allowed to. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.cta-band {
    --cta-bg: #F2FCFC;
    /* warm, upper left */
    --cta-o1-rgb: 243, 111, 90;
    --cta-o1-alpha: .25;
    --cta-o1-w: 1138px;
    --cta-o1-h: 1040px;
    --cta-o1-x: -22.2%;
    --cta-o1-y: -546px;
    --cta-o1-mid: 54.1%;
    --cta-o1-end: 83.2%;
    /* cool, lower right */
    --cta-o2-rgb: 13, 168, 194;
    --cta-o2-alpha: .15;
    --cta-o2-w: 954px;
    --cta-o2-h: 950px;
    --cta-o2-x: 74.2%;
    --cta-o2-y: 374px;
    --cta-o2-mid: 65%;
    --cta-o2-end: 100%;
    background-color: var(--cta-bg);
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 640px) {
    .cta-band {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

@media (min-width: 1024px) {
    .cta-band {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }
}

/* tablet — about three quarters of the desktop figure */

@media (max-width: 1023px) {
    .cta-band {
        --cta-o1-w: 840px;
        --cta-o1-h: 770px;
        --cta-o1-x: -28%;
        --cta-o1-y: -400px;
        --cta-o2-w: 700px;
        --cta-o2-h: 700px;
        --cta-o2-x: 64%;
        --cta-o2-y: 300px;
    }
}

/* phone — half the size, softer, hard against the edges so the middle stays readable */

@media (max-width: 639px) {
    .cta-band {
        --cta-o1-alpha: .20;
        --cta-o1-w: 560px;
        --cta-o1-h: 520px;
        --cta-o1-x: -38%;
        --cta-o1-y: -250px;
        --cta-o2-alpha: .12;
        --cta-o2-w: 470px;
        --cta-o2-h: 470px;
        --cta-o2-x: 52%;
        --cta-o2-y: 210px;
    }
}

/* ── the ground ──────────────────────────────────────────────────────────────────
   The glows follow .orb (site.css, linked before this sheet), so their mask wins over
   the orb default. */

.cta-band-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}

.cta-band-dots {
    position: absolute;
    inset: 0px;
}

.cta-glow-warm {
    width: var(--cta-o1-w);
    height: var(--cta-o1-h);
    left: var(--cta-o1-x);
    top: var(--cta-o1-y);
    background: rgba(var(--cta-o1-rgb), var(--cta-o1-alpha));
    -webkit-mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) var(--cta-o1-mid), transparent var(--cta-o1-end));
    mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) var(--cta-o1-mid), transparent var(--cta-o1-end));
}

.cta-glow-cool {
    width: var(--cta-o2-w);
    height: var(--cta-o2-h);
    left: var(--cta-o2-x);
    top: var(--cta-o2-y);
    background: rgba(var(--cta-o2-rgb), var(--cta-o2-alpha));
    -webkit-mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) var(--cta-o2-mid), transparent var(--cta-o2-end));
    mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) var(--cta-o2-mid), transparent var(--cta-o2-end));
}

/* ── the column ──────────────────────────────────────────────────────────────── */

.cta-band-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 880px;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

@media (min-width: 640px) {
    .cta-band-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cta-band-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* the Ukrainian page's wider column (its heading is longer) */

:where(.cta-band[data-width="wide"]) .cta-band-inner {
    max-width: 920px;
}

/* The pill is the Section Header's (section-head.css); on the band's tinted ground it is
   translucent and stands further from the heading. Derived from the host, never set per
   pill. Its dot pulses (.pulse-dot, site.css). */

:where(.cta-band) .section-eyebrow {
    margin-bottom: 1.5rem;
    background-color: rgb(255 255 255 / 0.7);
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (min-width: 640px) {
    :where(.cta-band) .section-eyebrow {
        margin-bottom: 1.75rem;
    }
}

@media (min-width: 1024px) {
    :where(.cta-band) .section-eyebrow {
        margin-bottom: 2rem;
    }
}

.cta-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.4rem, 5.5vw, 4.35rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

@media (min-width: 640px) {
    .cta-title {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cta-title {
        margin-bottom: 1.75rem;
    }
}

/* the ring mark: the word it loops, and the loop's box (the same box on every page) */

.ring-word {
    position: relative;
    display: inline-block;
}

.ring-mark {
    left: -9%;
    top: -26%;
    width: 118%;
    height: 152%;
    transform: rotate(-2deg);
    pointer-events: none;
    position: absolute;
}

.cta-lead {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 58ch;
    font-size: 14.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cta-lead {
        margin-bottom: 2.5rem;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .cta-lead {
        margin-bottom: 2.75rem;
        font-size: 15.5px;
    }
}

/* a line above the title: the title then carries the gap to the actions */

.cta-kicker {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cta-kicker {
        margin-bottom: 1.5rem;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .cta-kicker {
        font-size: 15.5px;
    }
}

:where(.cta-kicker) + .cta-title {
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    :where(.cta-kicker) + .cta-title {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :where(.cta-kicker) + .cta-title {
        margin-bottom: 2.75rem;
    }
}

/* ── the actions: three approved layouts ────────────────────────────────────────
   (none)   a row: the button, and beside it a quiet link
   stack    a column: the button, and under it the line with the spark
   pair     two buttons of equal rank, at the 48 / 56px size */

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cta-actions {
        gap: 1.25rem;
    }
}

.cta-actions:where([data-layout="stack"]) {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: normal;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cta-actions:where([data-layout="stack"]) {
        gap: 1rem;
    }
}

.cta-actions:where([data-layout="pair"]) {
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .cta-actions:where([data-layout="pair"]) {
        gap: 1rem;
    }
}

.cta-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    padding-left: 1.5rem;
    padding-right: 0.625rem;
    font-size: 15px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.cta-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .cta-button {
        padding-left: 1.75rem;
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .cta-button {
        padding-left: 2rem;
    }
}

.cta-button-orb {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.1);
}

:where(.cta-actions[data-layout="pair"]) .cta-button {
    display: inline-flex;
    height: 3rem;
    gap: 0.625rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1.25rem;
    font-size: 14px;
}

@media (min-width: 640px) {
    :where(.cta-actions[data-layout="pair"]) .cta-button {
        height: 3.5rem;
        padding-left: 1.75rem;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    :where(.cta-actions[data-layout="pair"]) .cta-button {
        padding-left: 1.75rem;
    }
}

.cta-button-secondary {
    display: inline-flex;
    height: 3rem;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 14px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.cta-button-secondary:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {
    .cta-button-secondary {
        height: 3.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .cta-button-secondary {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

.cta-link {
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.cta-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cta-link {
        font-size: 14.5px;
    }
}

.cta-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cta-hint {
        font-size: 13.5px;
    }
}

.cta-hint-icon {
    flex-shrink: 0;
}

/* the line under the actions; it carries the gap above itself */

.cta-note {
    margin-top: 1.5rem;
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cta-note {
        margin-top: 1.75rem;
        font-size: 14.5px;
    }
}

.cta-note:where([data-tone="quiet"]) {
    font-size: 13px;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .cta-note:where([data-tone="quiet"]) {
        font-size: 13.5px;
    }
}

@media (min-width: 1024px) {
    .cta-note:where([data-tone="quiet"]) {
        margin-top: 2rem;
    }
}

.cta-note-link {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.cta-note-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* ── variant: plain — the older pages' band ─────────────────────────────────────
   Soft glows instead of the dot field and the masked pair, the heading at section scale
   without a ring mark, one coloured button at the 48 / 56px size. The warm glow has no
   fill: those pages wrote it with a class Tailwind 3 does not have (an opacity of 12), so
   it was never drawn, and the approved look is the cool glow alone. */

.cta-band:where([data-variant="plain"]) {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .cta-band:where([data-variant="plain"]) {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .cta-band:where([data-variant="plain"]) {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

.cta-orb-warm {
    left: -180px;
    top: -16rem;
    height: 640px;
    width: 700px;
}

.cta-orb-cool {
    right: -140px;
    bottom: -18rem;
    height: 600px;
    width: 600px;
    background-color: rgb(12 169 195 / 0.1);
}

:where(.cta-band[data-variant="plain"]) .cta-band-inner {
    max-width: 1280px;
}

:where(.cta-band[data-variant="plain"]) .cta-title {
    margin-bottom: 1rem;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.06;
}

@media (min-width: 640px) {
    :where(.cta-band[data-variant="plain"]) .cta-title {
        margin-bottom: 1rem;
    }
}

@media (min-width: 1024px) {
    :where(.cta-band[data-variant="plain"]) .cta-title {
        margin-bottom: 1rem;
    }
}

:where(.cta-band[data-variant="plain"]) .cta-lead {
    margin-bottom: 1.5rem;
    max-width: 46ch;
    line-height: 1.5;
}

@media (min-width: 640px) {
    :where(.cta-band[data-variant="plain"]) .cta-lead {
        margin-bottom: 1.75rem;
    }
}

@media (min-width: 1024px) {
    :where(.cta-band[data-variant="plain"]) .cta-lead {
        margin-bottom: 2rem;
    }
}

:where(.cta-band[data-variant="plain"]) .cta-button {
    display: inline-flex;
    height: 3rem;
    --tw-bg-opacity: 1;
    background-color: rgb(9 145 168 / var(--tw-bg-opacity, 1));
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 14px;
}

:where(.cta-band[data-variant="plain"]) .cta-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(6 116 138 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    :where(.cta-band[data-variant="plain"]) .cta-button {
        height: 3.5rem;
        font-size: 15px;
    }
}

.cta-button:where([data-tone="orange"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(243 111 90 / var(--tw-bg-opacity, 1));
}

.cta-button:where([data-tone="orange"]):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 90 69 / var(--tw-bg-opacity, 1));
}

:where(.cta-button[data-tone="orange"]) .cta-button-orb {
    background-color: rgb(255 255 255 / 0.15);
}

/* ── the lead's measure ─────────────────────────────────────────────────────────
   The longest line the lead may run to, in characters (560px on About us). Without the
   attribute: 58 in the signature band, 46 in the plain one. After the variants, so a
   named measure wins over the variant's default. */

.cta-lead:where([data-measure="46"]) {
    max-width: 46ch;
}

.cta-lead:where([data-measure="52"]) {
    max-width: 52ch;
}

.cta-lead:where([data-measure="54"]) {
    max-width: 54ch;
}

.cta-lead:where([data-measure="56"]) {
    max-width: 56ch;
}

.cta-lead:where([data-measure="58"]) {
    max-width: 58ch;
}

.cta-lead:where([data-measure="62"]) {
    max-width: 62ch;
}

.cta-lead:where([data-measure="560px"]) {
    max-width: 560px;
}

/* ═══ Banner — library component ════════════════════════════════════════════════════
   Template: build/sections/banner.js · contract: build/sections/banner.contract.js
   Behaviour: none of its own (.rv reveals; the button is the site's .btn-press)
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The compact dark banner — the in-page secondary block. It sits BETWEEN sections, says
   one thing about a capability that lives on another page, and links there (DESIGN.md §
   The compact dark banner). It is a heading block, not a smaller act: its heading and
   support colour are the dark accent card's; what tells the dark blocks apart is the
   composition, never the type size.

   section.banner                 data-glow="teal|coral|coral-soft|violet"  data-layout="split" (none: a row)
     .banner-inner                the 1280px container
       .banner-box.rv[data-surface="dark"]   the dark rounded box
         .orb.banner-glow         the one glow, top right; its colour is the section's data-glow
         .banner-grid             row: text, then the action on the right · split: text | aside
           .banner-text
             (.section-eyebrow)   the pill; on the dark box it is translucent, its dot takes the glow's colour
             h2.banner-title
             p.banner-lead        data-measure="54|60|62|66"
             (p.banner-pill > span.banner-pill-dot)        the point of the block, raised into a pill
             (p.banner-callout > svg.banner-callout-icon)  a caution, boxed
             (p.banner-detail)    the quieter second paragraph      data-measure="58"
           row:   .banner-action > a.banner-button  |  .banner-action > .banner-actions > a.banner-button + a.banner-link
           split: .banner-aside > .banner-branch[aria-hidden] + .banner-action > a.banner-button
                  .banner-branch  the schematic: one parent (p.banner-branch-parent), two children
                                  (.banner-branch-child > .banner-branch-line + .banner-branch-icon + .banner-branch-label) */

/* ── the section and the box ─────────────────────────────────────────────────── */

.banner {
    position: relative;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .banner {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .banner {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

.banner-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .banner-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .banner-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.banner-box {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 640px) {
    .banner-box {
        border-radius: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .banner-box {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ── the glow: one place, a finite set of colours ───────────────────────────────
   The glow follows .orb (site.css, linked before this sheet). Its colour used to be an
   inline style passed per page; the colours form a finite set, so it is the section's
   data-glow. Values verbatim. */

.banner-glow {
    width: 520px;
    height: 500px;
    right: -6%;
    top: -220px;
}

:where(.banner[data-glow="teal"]) .banner-glow {
    background: rgba(44, 195, 219, .18);
}

:where(.banner[data-glow="coral"]) .banner-glow {
    background: rgba(243, 111, 90, .18);
}

:where(.banner[data-glow="coral-soft"]) .banner-glow {
    background: rgba(243, 111, 90, .16);
}

:where(.banner[data-glow="violet"]) .banner-glow {
    background: rgba(154, 106, 222, .18);
}

/* ── the grid: two approved layouts ─────────────────────────────────────────────
   (none)  a row: the text, and the action in the right-hand slot, so the block still
           reads as two halves
   split   text left, a schematic panel right (1.4fr / 1fr), the action under the panel */

.banner-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .banner-grid {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
}

:where(.banner[data-layout="split"]) .banner-grid {
    display: grid;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
}

@media (min-width: 1024px) {
    :where(.banner[data-layout="split"]) .banner-grid {
        grid-template-columns: 1.4fr 1fr;
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
}

.banner-text {
    min-width: 0px;
    flex: 1 1 0%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

:where(.banner[data-layout="split"]) .banner-text {
    flex: 0 1 auto;
}

/* The pill is the Section Header's (section-head.css); on the dark box it is translucent
   and closer to the heading, and its dot takes the colour of the banner's glow. Derived
   from the host, never set per pill. */

:where(.banner) .section-eyebrow {
    margin-bottom: 0.875rem;
    background-color: rgb(255 255 255 / 0.1);
    --tw-ring-color: rgb(255 255 255 / 0.15);
}

@media (min-width: 640px) {
    :where(.banner) .section-eyebrow {
        margin-bottom: 0.875rem;
    }
}

@media (min-width: 1024px) {
    :where(.banner) .section-eyebrow {
        margin-bottom: 0.875rem;
    }
}

:where(.banner) .section-eyebrow-label {
    color: rgb(255 255 255 / 0.8);
}

:where(.banner[data-glow="teal"]) .section-eyebrow-dot,
:where(.banner[data-glow="violet"]) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

:where(.banner[data-glow="coral"]) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(243 111 90 / var(--tw-bg-opacity, 1));
}

:where(.banner[data-glow="coral-soft"]) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(245 137 113 / var(--tw-bg-opacity, 1));
}

/* the dark accent card's heading, exactly */

.banner-title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

/* the lead is text-white/60 — the dark accent card's support colour; the detail steps
   down to /50, which still clears 4.5:1 on ink-950 */

.banner-lead {
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.6);
}

@media (min-width: 640px) {
    .banner-lead {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .banner-lead {
        font-size: 15.5px;
    }
}

.banner-pill {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(44 195 219 / 0.1);
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 12.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(167 227 237 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(44 195 219 / 0.3);
}

@media (min-width: 640px) {
    .banner-pill {
        font-size: 13px;
    }
}

.banner-pill-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

.banner-callout {
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border-radius: 1rem;
    background-color: rgb(245 137 113 / 0.1);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 12.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(253 229 224 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(245 137 113 / 0.3);
}

@media (min-width: 640px) {
    .banner-callout {
        font-size: 13px;
    }
}

.banner-callout-icon {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.banner-detail {
    margin-top: 0.75rem;
    max-width: 60ch;
    font-size: 13px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.5);
}

@media (min-width: 640px) {
    .banner-detail {
        font-size: 13.5px;
    }
}

:where(.banner-pill) + .banner-detail {
    margin-top: 0.875rem;
}

/* ── the action ──────────────────────────────────────────────────────────────── */

.banner-action {
    flex-shrink: 0;
}

.banner-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}

@media (min-width: 1024px) {
    .banner-actions {
        align-items: flex-end;
    }
}

/* the action on a dark ground: the white button */

.banner-button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.banner-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 242 246 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .banner-button {
        padding-left: 1.5rem;
        padding-right: 0.5rem;
        font-size: 14.5px;
    }
}

.banner-button-orb {
    display: none;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(17 24 39 / 0.1);
}

@media (min-width: 640px) {
    .banner-button-orb {
        display: flex;
    }
}

.banner-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    color: rgb(255 255 255 / 0.7);
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: rgb(255 255 255 / 0.3);
    text-decoration-color: rgb(255 255 255 / 0.3);
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.banner-link:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .banner-link {
        font-size: 13.5px;
    }
}

/* ── split: the aside and its schematic ─────────────────────────────────────────
   One parent, two children joined to it by a drawn bracket: the relationship the copy
   states (one API, two checks; one balance, two allocations). */

.banner-aside {
    min-width: 0px;
}

:where(.banner-aside) > .banner-action {
    margin-top: 1.25rem;
}

.banner-branch {
    min-width: 0px;
    border-radius: 1rem;
    background-color: rgb(255 255 255 / .05);
    padding: 1.25rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
    .banner-branch {
        border-radius: 1.5rem;
        padding: 1.5rem;
    }
}

.banner-branch-parent {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgb(255 255 255 / 0.6);
}

.banner-branch-parent-icon {
    flex-shrink: 0;
}

.banner-branch-children > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.banner-branch-children {
    padding-left: 1.5rem;
}

.banner-branch-child {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border-radius: 1rem;
    background-color: rgb(255 255 255 / .06);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

/* the bracket: the first child's line runs down from its middle, the second's up to it */

.banner-branch-line {
    position: absolute;
    right: 100%;
    top: 50%;
    bottom: -0.75rem;
    width: 1.5rem;
    border-top-left-radius: 1rem;
    border-top-width: 1px;
    border-left-width: 1px;
    border-color: rgb(255 255 255 / 0.15);
}

:where(.banner-branch-child + .banner-branch-child) > .banner-branch-line {
    top: -0.75rem;
    bottom: 50%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 1rem;
    border-top-width: 0px;
    border-bottom-width: 1px;
}

.banner-branch-icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: rgb(255 255 255 / .07);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

.banner-branch-label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.375;
    color: rgb(255 255 255 / 0.85);
}

@media (min-width: 640px) {
    .banner-branch-label {
        font-size: 13px;
    }
}

/* ── measures ───────────────────────────────────────────────────────────────────
   The longest line, in characters. Without the attribute: 62 for the lead, 60 for the
   detail. After the defaults, so a named measure wins. */

.banner-lead:where([data-measure="54"]) {
    max-width: 54ch;
}

.banner-lead:where([data-measure="60"]) {
    max-width: 60ch;
}

.banner-lead:where([data-measure="62"]) {
    max-width: 62ch;
}

.banner-lead:where([data-measure="66"]) {
    max-width: 66ch;
}

.banner-detail:where([data-measure="58"]) {
    max-width: 58ch;
}

.banner-detail:where([data-measure="60"]) {
    max-width: 60ch;
}

/* ═══ Inquiry form — library component ══════════════════════════════════════════════
   Template: build/sections/inquiry-form.js · contract: build/sections/inquiry-form.contract.js
   Behaviour: build/assets/js/36-inquiry-form.js ([data-inquiry-form]: the label / field id
   pairs repaired at load, the prototype's inert submit) and 35-form-arrive.js
   (data-focus-first: a link to the form puts the caret in its first field)
   Written the way section-head.css explains (@apply, outside @layer, (0,1,0) selectors,
   variants as data-* in :where()).

   The qualified inquiry: a head column that says what to send, and a card with the form.
   The fields themselves (.cf-label, .cf-field) are the site's form recipe — site.css,
   build/assets/css/14-forms.css — shared with the forms that are not library sections
   (Contact, Account, the Scholarship application).

   section.inquiry              data-bg="white|cool"  data-layout="fluid-wide"  data-accent="teal"  data-sticky="off"
     .inquiry-inner             the 1280px container
       .inquiry-grid            head column + card
         .inquiry-aside.rv      the sticky head column: Section Header (eyebrow, h2, intro)
           (p.inquiry-alt > a.inquiry-alt-link)      another way to reach us, under the intro
         .inquiry-card.rv
           form[data-inquiry-form]
             .inquiry-fields    the two-column field grid
               .inquiry-field   data-span="full"
                 label.cf-label (> i: the required mark · > span.inquiry-optional)
                 input.cf-field | textarea.cf-field | select.cf-field
                 (p.inquiry-help)
               fieldset.inquiry-choice > legend.cf-label + .inquiry-chips >
                 label.inquiry-option > input.inquiry-option-input + span.inquiry-chip > svg.inquiry-chip-tick
             (label.inquiry-consent > input.inquiry-consent-box + span.inquiry-consent-text
                                      (a.inquiry-link, i.inquiry-required))
             .inquiry-submit > button.inquiry-button > span.inquiry-button-orb.icon-orb
           (.inquiry-success[hidden] > .inquiry-success-title (+ p.inquiry-success-text)) */

/* ── the section ─────────────────────────────────────────────────────────────── */

.inquiry {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .inquiry {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .inquiry {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* the cool tint the brief-built pages alternate with white */

.inquiry:where([data-bg="cool"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1));
}

/* The API page's section clips its overflow, and a clipped section is its own scroll
   container: the head column does not follow the scroll there. Kept as approved, and
   named for what the reader sees. */

.inquiry:where([data-sticky="off"]) {
    overflow: hidden;
}

.inquiry-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .inquiry-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .inquiry-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── the grid: two approved proportions ─────────────────────────────────────────
   (none)       0.85fr / 1.15fr — Business & Teams, University (the FAQ's fluid grid)
   fluid-wide   0.9fr / 1.1fr   — the API page */

.inquiry-grid {
    display: grid;
    align-items: flex-start;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .inquiry-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 3.5rem;
    }

    :where(.inquiry[data-layout="fluid-wide"]) .inquiry-grid {
        grid-template-columns: 0.9fr 1.1fr;
    }
}

/* ── the head column ─────────────────────────────────────────────────────────────
   The Section Header (section-head.css) with its common spacing. The pill takes its
   background from the section's data-bg; its dot is the accent. */

@media (min-width: 1024px) {
    .inquiry-aside {
        position: -webkit-sticky;
        position: sticky;
        top: 7rem;
    }
}

:where(.inquiry-aside) .section-intro {
    max-width: 56ch;
}

:where(.inquiry[data-accent="teal"]) .section-eyebrow-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

.inquiry-alt {
    margin-top: 1.5rem;
    font-size: 13px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .inquiry-alt {
        font-size: 13.5px;
    }
}

@media (min-width: 1024px) {
    .inquiry-alt {
        margin-top: 1.75rem;
    }
}

.inquiry-alt-link {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.inquiry-alt-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* ── the card and the field grid ─────────────────────────────────────────────── */

.inquiry-card {
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

@media (min-width: 640px) {
    .inquiry-card {
        border-radius: 28px;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .inquiry-card {
        border-radius: 2rem;
        padding: 2rem;
    }
}

.inquiry-fields {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .inquiry-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.inquiry-field {
    min-width: 0px;
}

@media (min-width: 640px) {
    .inquiry-field:where([data-span="full"]) {
        grid-column: span 2 / span 2;
    }
}

.inquiry-optional {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.inquiry-help {
    margin-top: 0.5rem;
    font-size: 12px;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

/* ── the multi-select: chips ─────────────────────────────────────────────────────
   A chip fills when its checkbox is checked, and says so with a tick, not only with
   colour; focus lands on the hidden input, so the ring is drawn on the chip. (Moved from
   build/assets/css/14-forms.css, where the classes were .need-opt / .need-chip.) */

.inquiry-choice {
    margin: 0px;
    min-width: 0px;
    border-width: 0px;
    padding: 0px;
}

@media (min-width: 640px) {
    .inquiry-choice {
        grid-column: span 2 / span 2;
    }
}

.inquiry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inquiry-option {
    cursor: pointer;
}

.inquiry-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.inquiry-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.inquiry-chip .inquiry-chip-tick {
    display: none;
}

.inquiry-option input:checked + .inquiry-chip {
    background: #111827;
    color: #fff;
    box-shadow: inset 0 0 0 1px #111827;
}

.inquiry-option input:checked + .inquiry-chip .inquiry-chip-tick {
    display: block;
}

.inquiry-option input:focus-visible + .inquiry-chip {
    outline: 2px solid #0CA9C3;
    outline-offset: 3px;
}

.inquiry-option:hover .inquiry-chip {
    background: #F3F4F6;
}

.inquiry-option:hover input:checked + .inquiry-chip {
    background: #1F2937;
}

/* ── consent, submit, success ────────────────────────────────────────────────── */

.inquiry-consent {
    margin-top: 1.5rem;
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .inquiry-consent {
        margin-top: 1.75rem;
    }
}

.inquiry-consent-box {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    accent-color: #0991A8;
}

.inquiry-consent-text {
    font-size: 13px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.inquiry-link {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.inquiry-link:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.inquiry-required {
    font-style: normal;
    --tw-text-opacity: 1;
    color: rgb(184 68 49 / var(--tw-text-opacity, 1));
}

.inquiry-submit {
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .inquiry-submit {
        margin-top: 1.75rem;
    }
}

.inquiry-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
    padding-right: 0.5rem;
    font-size: 13.5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.inquiry-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
    .inquiry-button {
        width: auto;
        justify-content: flex-start;
        padding-left: 1.5rem;
        font-size: 14.5px;
    }
}

.inquiry-button-orb {
    display: none;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
    .inquiry-button-orb {
        display: flex;
    }
}

/* the success state: in the HTML, hidden, for the form's binding to show */

.inquiry-success {
    margin-top: 1.5rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-border-opacity, 1));
    padding-top: 1.5rem;
}

.inquiry-success-title {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.inquiry-success-title:where(:not(:last-child)) {
    margin-bottom: 0.375rem;
}

.inquiry-success-text {
    font-size: 13px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

/* page-specific components written in the library's manner, compiled the same way; not
   Section Library members (build/about/ — the About page's team grid and timeline) */

/* ═══ Team — the About page's profile grid ══════════════════════════════════════════
   PAGE-SPECIFIC (build/about/), not a Section Library member; a library candidate after
   the pilot review.
   Template: build/about/team.js · contract: build/about/team.contract.js
   Written the way build/sections/section-head.css explains (@apply, outside @layer,
   (0,1,0) selectors, variants as data-* in :where()) and compiled in the same Tailwind
   run (build/assets/css/tailwind.src.css).

   section.team                data-bg="white|tint"
     .team-inner               the 1280px container
       .team-head              the Section Header (eyebrow, h2, intro), capped at 760px
       ul.team-grid            the profiles
         li.team-card
           .team-photo         the 4:5 portrait plate
             span.team-initials   the placeholder, until there is a photo
             img.team-photo-img   the photo, when there is one
           h3.team-name
           p.team-role
           p.team-bio
           .team-linkedin      span: inactive (no address yet) · a: the link

   One other root: the grid alone (ul.team-grid), inside another component.

   A profile is not a boxed card: the portrait plate is its only surface and the text
   stands on the section, so nine of them read as people, not as feature tiles. The plate
   alternates with the ground (IMAGES.md §8.5): grey on a white section, white on a tint.

   Three layouts, placed by the fixed order of the parts (no wrapper elements):
     phone    < 640    photo 112px beside name, role and the icon; the bio under both
     tablet   640–767  photo 168px beside everything
     grid     ≥ 768    three columns, the photo above the text, the icon at the bottom
   Three columns from 768 rather than two, so nine profiles never leave an orphan.

   In the grid the parts of a row of profiles line up — names, roles, bios, icons — by
   subgrid: each card borrows five rows of the grid, so a role that wraps to two lines
   moves the bios of its whole row, and of no other row. Without subgrid support the
   card keeps its own rows and only the icons line up. */

/* ── the section ─────────────────────────────────────────────────────────────── */

.team {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .team {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .team {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.team:where([data-bg="tint"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.team-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .team-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .team-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.team-head {
    margin-bottom: 2.5rem;
    max-width: 760px;
}

@media (min-width: 640px) {
    .team-head {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-head {
        margin-bottom: 4rem;
    }
}

/* ── the grid ────────────────────────────────────────────────────────────────── */

.team-grid {
    display: grid;
    row-gap: 2.5rem;
}

@media (min-width: 640px) {
    .team-grid {
        row-gap: 3rem;
    }
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .team-grid {
        -moz-column-gap: 2rem;
        column-gap: 2rem;
        row-gap: 4rem;
    }
}

/* ── the profile ─────────────────────────────────────────────────────────────────
   Rows — phone: name / role / icon (takes what is left of the photo's height) / bio;
   tablet: name / role / bio / icon; grid: photo / name / role / bio (takes what is left
   of the row, so the icons of a row line up) / icon. */

.team-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto 1fr auto;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}

@media (min-width: 640px) {
    .team-card {
        grid-template-columns: 168px 1fr;
        grid-template-rows: auto auto auto 1fr;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .team-card {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-template-rows: auto auto auto 1fr auto;
        -moz-column-gap: 0px;
        column-gap: 0px;
    }
}

.team-photo {
    position: relative;
    grid-column-start: 1;
    grid-row: span 3 / span 3;
    grid-row-start: 1;
    display: flex;
    aspect-ratio: 4/5;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    overflow: hidden;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(241 242 246 / var(--tw-bg-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: rgb(0 0 0 / .04);
}

@media (min-width: 640px) {
    .team-photo {
        grid-row: span 4 / span 4;
        border-radius: 20px;
    }
}

@media (min-width: 768px) {
    .team-photo {
        grid-row: span 1 / span 1;
    }
}

@media (min-width: 1024px) {
    .team-photo {
        border-radius: 1.5rem;
    }
}

/* on a tint section the plate is white */

:where(.team[data-bg="tint"]) .team-photo {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* the placeholder: a quiet monogram, set wide so it reads as a mark and not as a word */

.team-initials {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .team-initials {
        font-size: 28px;
    }
}

@media (min-width: 768px) {
    .team-initials {
        font-size: 32px;
    }
}

@media (min-width: 1024px) {
    .team-initials {
        font-size: 40px;
    }
}

.team-photo-img {
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.team-name {
    grid-column-start: 2;
    grid-row-start: 1;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .team-name {
        font-size: 17px;
    }
}

@media (min-width: 768px) {
    .team-name {
        grid-column-start: 1;
        grid-row-start: 2;
        margin-top: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .team-name {
        margin-top: 1.5rem;
        font-size: 18px;
    }
}

.team-role {
    grid-column-start: 2;
    grid-row-start: 2;
    margin-top: 0.25rem;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(6 116 138 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .team-role {
        font-size: 13.5px;
    }
}

@media (min-width: 768px) {
    .team-role {
        grid-column-start: 1;
        grid-row-start: 3;
    }
}

.team-bio {
    grid-column: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 4;
    margin-top: 1rem;
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .team-bio {
        grid-column: span 1 / span 1;
        grid-column-start: 2;
        grid-row-start: 3;
        margin-top: 0.75rem;
        font-size: 14.5px;
    }
}

@media (min-width: 768px) {
    .team-bio {
        grid-column-start: 1;
        grid-row-start: 4;
    }
}

/* ── the grid's rows, shared by the cards of a row (subgrid) ───────────────────────
   The grid's own row gap would open between the five parts of a card, so it is dropped
   and each card carries the gap as padding under it; the grid takes the last row's back. */

@supports (grid-template-rows: subgrid) {
    @media (min-width: 768px) {
        .team-grid {
            margin-bottom: -3rem;
            row-gap: 0px;
        }
    }

    @media (min-width: 1024px) {
        .team-grid {
            margin-bottom: -4rem;
        }
    }

    @media (min-width: 768px) {
        .team-card {
            grid-row: span 5 / span 5;
            grid-template-rows: subgrid;
            padding-bottom: 3rem;
        }
    }

    @media (min-width: 1024px) {
        .team-card {
            padding-bottom: 4rem;
        }
    }
}

/* ── LinkedIn ────────────────────────────────────────────────────────────────────
   44px, the touch-target floor. As a <span> it is the inactive mark: dashed, pale, no
   pointer — it must not pass for a link. As an <a> it is the link. */

.team-linkedin {
    grid-column-start: 2;
    grid-row-start: 3;
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    justify-self: start;
    border-radius: 9999px;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .team-linkedin {
        grid-row-start: 4;
        margin-top: 1rem;
        align-self: flex-start;
    }
}

@media (min-width: 768px) {
    .team-linkedin {
        grid-column-start: 1;
        grid-row-start: 5;
        align-self: flex-end;
    }
}

.team-linkedin:where(a) {
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.team-linkedin:where(a):hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 215 232 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(6 116 138 / var(--tw-text-opacity, 1));
}

/* the site's focus ring squares an element's corners (07-a11y.css); the icon stays round */

a.team-linkedin:focus-visible {
    border-radius: 9999px;
}

/* ═══ Timeline — the About page's milestones ════════════════════════════════════════
   PAGE-SPECIFIC (build/about/), not a Section Library member; a library candidate after
   the pilot review.
   Template: build/about/timeline.js · contract: build/about/timeline.contract.js
   Written the way build/sections/section-head.css explains (@apply, outside @layer,
   (0,1,0) selectors, variants as data-* in :where()) and compiled in the same Tailwind
   run (build/assets/css/tailwind.src.css).

   section.timeline            data-bg="white|tint"
     .timeline-inner           the 1280px container
       .timeline-head          the Section Header (eyebrow, h2, intro), capped at 760px
       ol.timeline-list        the milestones, in order
         li.timeline-item      its ::before is the dot on the rail
           p.timeline-year
           h3.timeline-title
           p.timeline-text

   The rail is each item's own border, so it is as long as the list and needs no element
   of its own: down the left on a phone, along the top from 640. Items sit flush (no
   column gap) so the top rail runs unbroken; their right padding is the gap. Three
   layouts and no sideways scroll in any of them:
     phone    < 640     one column, the rail on the left
     tablet   640–1279  three across, two rows for six milestones
     desktop  ≥ 1280    one row, drawn for about six milestones */

.timeline {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .timeline {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .timeline {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.timeline:where([data-bg="tint"]) {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.timeline-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .timeline-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .timeline-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.timeline-head {
    margin-bottom: 2.5rem;
    max-width: 760px;
}

@media (min-width: 640px) {
    .timeline-head {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .timeline-head {
        margin-bottom: 4rem;
    }
}

.timeline-list {
    display: grid;
}

@media (min-width: 640px) {
    .timeline-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 3rem;
    }
}

@media (min-width: 1280px) {
    .timeline-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* the rail (a border) and the dot (::before), ringed in the section's own colour so the
   rail breaks around it */

.timeline-item {
    position: relative;
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 1.75rem;
    padding-bottom: 2rem;
}

.timeline-item::before {
    position: absolute;
    top: 0.375rem;
    left: -5.5px;
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(12 169 195 / var(--tw-bg-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
    --tw-content: '';
    content: var(--tw-content);
}

@media (min-width: 640px) {
    .timeline-item {
        border-left-width: 0px;
        border-top-width: 1px;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-right: 1.5rem;
        padding-top: 1.75rem;
    }

    .timeline-item::before {
        top: -5.5px;
        content: var(--tw-content);
        left: 0px;
    }
}

@media (min-width: 1024px) {
    .timeline-item {
        padding-right: 2rem;
    }
}

:where(.timeline[data-bg="tint"]) .timeline-item::before {
    content: var(--tw-content);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(248 249 251 / var(--tw-ring-opacity, 1));
}

/* on a phone the rail stops at the last dot instead of running past the last text */

.timeline-item:where(:last-child) {
    border-left-color: transparent;
    padding-bottom: 0px;
}

.timeline-year {
    font-size: 22px;
    font-weight: 800;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    line-height: 1;
    letter-spacing: -0.035em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .timeline-year {
        font-size: 24px;
    }
}

@media (min-width: 1024px) {
    .timeline-year {
        font-size: 28px;
    }
}

.timeline-title {
    margin-top: 0.75rem;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .timeline-title {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .timeline-title {
        margin-top: 1rem;
    }
}

.timeline-text {
    margin-top: 0.375rem;
    font-size: 13.5px;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .timeline-text {
        font-size: 14.5px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.collapse {
    visibility: collapse;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.inset-0 {
    inset: 0px;
}

.inset-x-0 {
    left: 0px;
    right: 0px;
}

.inset-y-0 {
    top: 0px;
    bottom: 0px;
}

.-bottom-2 {
    bottom: -0.5rem;
}

.-bottom-3 {
    bottom: -0.75rem;
}

.-bottom-64 {
    bottom: -16rem;
}

.-left-1\.5 {
    left: -0.375rem;
}

.-left-40 {
    left: -10rem;
}

.-left-44 {
    left: -11rem;
}

.-left-48 {
    left: -12rem;
}

.-left-52 {
    left: -13rem;
}

.-left-56 {
    left: -14rem;
}

.-left-6 {
    left: -1.5rem;
}

.-left-8 {
    left: -2rem;
}

.-left-9 {
    left: -2.25rem;
}

.-right-20 {
    right: -5rem;
}

.-right-24 {
    right: -6rem;
}

.-right-28 {
    right: -7rem;
}

.-right-40 {
    right: -10rem;
}

.-right-48 {
    right: -12rem;
}

.-right-56 {
    right: -14rem;
}

.-right-8 {
    right: -2rem;
}

.-right-9 {
    right: -2.25rem;
}

.-top-1\.5 {
    top: -0.375rem;
}

.-top-2\.5 {
    top: -0.625rem;
}

.-top-24 {
    top: -6rem;
}

.-top-3 {
    top: -0.75rem;
}

.-top-40 {
    top: -10rem;
}

.-top-48 {
    top: -12rem;
}

.-top-56 {
    top: -14rem;
}

.-top-64 {
    top: -16rem;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-1\/2 {
    bottom: 50%;
}

.bottom-10 {
    bottom: 2.5rem;
}

.bottom-16 {
    bottom: 4rem;
}

.bottom-2\.5 {
    bottom: 0.625rem;
}

.bottom-4 {
    bottom: 1rem;
}

.bottom-5 {
    bottom: 1.25rem;
}

.bottom-8 {
    bottom: 2rem;
}

.bottom-9 {
    bottom: 2.25rem;
}

.bottom-\[-160px\] {
    bottom: -160px;
}

.bottom-\[-200px\] {
    bottom: -200px;
}

.left-0 {
    left: 0px;
}

.left-1\/2 {
    left: 50%;
}

.left-1\/4 {
    left: 25%;
}

.left-5 {
    left: 1.25rem;
}

.left-\[-140px\] {
    left: -140px;
}

.left-\[21px\] {
    left: 21px;
}

.left-full {
    left: 100%;
}

.right-0 {
    right: 0px;
}

.right-1\.5 {
    right: 0.375rem;
}

.right-1\/2 {
    right: 50%;
}

.right-1\/4 {
    right: 25%;
}

.right-3\.5 {
    right: 0.875rem;
}

.right-4 {
    right: 1rem;
}

.right-5 {
    right: 1.25rem;
}

.right-\[-120px\] {
    right: -120px;
}

.right-\[-140px\] {
    right: -140px;
}

.right-\[-150px\] {
    right: -150px;
}

.right-\[-160px\] {
    right: -160px;
}

.right-full {
    right: 100%;
}

.top-0 {
    top: 0px;
}

.top-1\/2 {
    top: 50%;
}

.top-10 {
    top: 2.5rem;
}

.top-12 {
    top: 3rem;
}

.top-16 {
    top: 4rem;
}

.top-20 {
    top: 5rem;
}

.top-24 {
    top: 6rem;
}

.top-4 {
    top: 1rem;
}

.top-40 {
    top: 10rem;
}

.top-48 {
    top: 12rem;
}

.top-5 {
    top: 1.25rem;
}

.top-52 {
    top: 13rem;
}

.top-8 {
    top: 2rem;
}

.top-9 {
    top: 2.25rem;
}

.top-\[-160px\] {
    top: -160px;
}

.top-\[-80px\] {
    top: -80px;
}

.top-\[22px\] {
    top: 22px;
}

.top-\[74px\] {
    top: 74px;
}

.top-full {
    top: 100%;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-\[100\] {
    z-index: 100;
}

.z-\[1\] {
    z-index: 1;
}

.z-\[90\] {
    z-index: 90;
}

.z-\[95\] {
    z-index: 95;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-start-2 {
    grid-column-start: 2;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.-m-2\.5 {
    margin: -0.625rem;
}

.m-0 {
    margin: 0px;
}

.-mx-2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-7 {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.\!mb-0 {
    margin-bottom: 0px !important;
}

.\!mt-0 {
    margin-top: 0px !important;
}

.-ml-1 {
    margin-left: -0.25rem;
}

.-ml-1\.5 {
    margin-left: -0.375rem;
}

.-ml-4 {
    margin-left: -1rem;
}

.-mr-4 {
    margin-right: -1rem;
}

.-mt-1 {
    margin-top: -0.25rem;
}

.-mt-2 {
    margin-top: -0.5rem;
}

.mb-0\.5 {
    margin-bottom: 0.125rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-1\.5 {
    margin-bottom: 0.375rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-2\.5 {
    margin-bottom: 0.625rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-3\.5 {
    margin-bottom: 0.875rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-7 {
    margin-bottom: 1.75rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-9 {
    margin-bottom: 2.25rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-1\.5 {
    margin-left: 0.375rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-\[50\%\] {
    margin-left: 50%;
}

.ml-auto {
    margin-left: auto;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-\[50\%\] {
    margin-right: 50%;
}

.mt-0 {
    margin-top: 0px;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-1\.5 {
    margin-top: 0.375rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-12 {
    margin-top: 3rem;
}

.mt-14 {
    margin-top: 3.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-2\.5 {
    margin-top: 0.625rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-7 {
    margin-top: 1.75rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-\[\.42em\] {
    margin-top: .42em;
}

.mt-\[\.7em\] {
    margin-top: .7em;
}

.mt-\[3px\] {
    margin-top: 3px;
}

.mt-\[9px\] {
    margin-top: 9px;
}

.mt-auto {
    margin-top: auto;
}

.\!block {
    display: block !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.\!table {
    display: table !important;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

.aspect-\[324\/113\] {
    aspect-ratio: 324/113;
}

.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}

.aspect-\[740\/550\] {
    aspect-ratio: 740/550;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.\!h-11 {
    height: 2.75rem !important;
}

.\!h-auto {
    height: auto !important;
}

.h-1 {
    height: 0.25rem;
}

.h-1\.5 {
    height: 0.375rem;
}

.h-10 {
    height: 2.5rem;
}

.h-11 {
    height: 2.75rem;
}

.h-12 {
    height: 3rem;
}

.h-14 {
    height: 3.5rem;
}

.h-16 {
    height: 4rem;
}

.h-2 {
    height: 0.5rem;
}

.h-2\.5 {
    height: 0.625rem;
}

.h-20 {
    height: 5rem;
}

.h-28 {
    height: 7rem;
}

.h-3\.5 {
    height: 0.875rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-7 {
    height: 1.75rem;
}

.h-8 {
    height: 2rem;
}

.h-9 {
    height: 2.25rem;
}

.h-\[14px\] {
    height: 14px;
}

.h-\[18px\] {
    height: 18px;
}

.h-\[22px\] {
    height: 22px;
}

.h-\[300px\] {
    height: 300px;
}

.h-\[420px\] {
    height: 420px;
}

.h-\[42px\] {
    height: 42px;
}

.h-\[460px\] {
    height: 460px;
}

.h-\[46px\] {
    height: 46px;
}

.h-\[480px\] {
    height: 480px;
}

.h-\[520px\] {
    height: 520px;
}

.h-\[560px\] {
    height: 560px;
}

.h-\[600px\] {
    height: 600px;
}

.h-\[620px\] {
    height: 620px;
}

.h-\[640px\] {
    height: 640px;
}

.h-\[64px\] {
    height: 64px;
}

.h-\[680px\] {
    height: 680px;
}

.h-\[720px\] {
    height: 720px;
}

.h-\[96px\] {
    height: 96px;
}

.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-px {
    height: 1px;
}

.max-h-\[57\%\] {
    max-height: 57%;
}

.max-h-\[88vh\] {
    max-height: 88vh;
}

.max-h-\[calc\(100dvh-8rem\)\] {
    max-height: calc(100dvh - 8rem);
}

.min-h-\[140px\] {
    min-height: 140px;
}

.min-h-\[220px\] {
    min-height: 220px;
}

.min-h-\[60px\] {
    min-height: 60px;
}

.min-h-\[62px\] {
    min-height: 62px;
}

.min-h-\[9rem\] {
    min-height: 9rem;
}

.min-h-screen {
    min-height: 100vh;
}

.w-1 {
    width: 0.25rem;
}

.w-1\.5 {
    width: 0.375rem;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-10 {
    width: 2.5rem;
}

.w-10\/12 {
    width: 83.333333%;
}

.w-11 {
    width: 2.75rem;
}

.w-11\/12 {
    width: 91.666667%;
}

.w-12 {
    width: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.w-16 {
    width: 4rem;
}

.w-2 {
    width: 0.5rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-2\/5 {
    width: 40%;
}

.w-20 {
    width: 5rem;
}

.w-24 {
    width: 6rem;
}

.w-28 {
    width: 7rem;
}

.w-3\.5 {
    width: 0.875rem;
}

.w-3\/4 {
    width: 75%;
}

.w-3\/5 {
    width: 60%;
}

.w-4 {
    width: 1rem;
}

.w-4\/5 {
    width: 80%;
}

.w-5 {
    width: 1.25rem;
}

.w-5\/6 {
    width: 83.333333%;
}

.w-52 {
    width: 13rem;
}

.w-6 {
    width: 1.5rem;
}

.w-7 {
    width: 1.75rem;
}

.w-8 {
    width: 2rem;
}

.w-9 {
    width: 2.25rem;
}

.w-\[100\%\] {
    width: 100%;
}

.w-\[12\%\] {
    width: 12%;
}

.w-\[14px\] {
    width: 14px;
}

.w-\[18px\] {
    width: 18px;
}

.w-\[190px\] {
    width: 190px;
}

.w-\[208px\] {
    width: 208px;
}

.w-\[210px\] {
    width: 210px;
}

.w-\[220px\] {
    width: 220px;
}

.w-\[230px\] {
    width: 230px;
}

.w-\[240px\] {
    width: 240px;
}

.w-\[300px\] {
    width: 300px;
}

.w-\[34\%\] {
    width: 34%;
}

.w-\[38\%\] {
    width: 38%;
}

.w-\[420px\] {
    width: 420px;
}

.w-\[43\%\] {
    width: 43%;
}

.w-\[46\%\] {
    width: 46%;
}

.w-\[460px\] {
    width: 460px;
}

.w-\[48\%\] {
    width: 48%;
}

.w-\[500px\] {
    width: 500px;
}

.w-\[52\%\] {
    width: 52%;
}

.w-\[520px\] {
    width: 520px;
}

.w-\[560px\] {
    width: 560px;
}

.w-\[58\%\] {
    width: 58%;
}

.w-\[60\%\] {
    width: 60%;
}

.w-\[600px\] {
    width: 600px;
}

.w-\[62\%\] {
    width: 62%;
}

.w-\[620px\] {
    width: 620px;
}

.w-\[62px\] {
    width: 62px;
}

.w-\[64\%\] {
    width: 64%;
}

.w-\[640px\] {
    width: 640px;
}

.w-\[64px\] {
    width: 64px;
}

.w-\[66\%\] {
    width: 66%;
}

.w-\[68\%\] {
    width: 68%;
}

.w-\[680px\] {
    width: 680px;
}

.w-\[70\%\] {
    width: 70%;
}

.w-\[72\%\] {
    width: 72%;
}

.w-\[720px\] {
    width: 720px;
}

.w-\[78\%\] {
    width: 78%;
}

.w-\[80\%\] {
    width: 80%;
}

.w-\[84\%\] {
    width: 84%;
}

.w-\[86\%\] {
    width: 86%;
}

.w-\[88\%\] {
    width: 88%;
}

.w-\[88px\] {
    width: 88px;
}

.w-\[92\%\] {
    width: 92%;
}

.w-\[calc\(1\.25rem\+3rem\)\] {
    width: calc(1.25rem + 3rem);
}

.w-auto {
    width: auto;
}

.w-full {
    width: 100%;
}

.w-max {
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
}

.w-px {
    width: 1px;
}

.min-w-0 {
    min-width: 0px;
}

.min-w-\[520px\] {
    min-width: 520px;
}

.min-w-\[640px\] {
    min-width: 640px;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-\[1000px\] {
    max-width: 1000px;
}

.max-w-\[1040px\] {
    max-width: 1040px;
}

.max-w-\[1080px\] {
    max-width: 1080px;
}

.max-w-\[1100px\] {
    max-width: 1100px;
}

.max-w-\[1145px\] {
    max-width: 1145px;
}

.max-w-\[1180px\] {
    max-width: 1180px;
}

.max-w-\[1200px\] {
    max-width: 1200px;
}

.max-w-\[1280px\] {
    max-width: 1280px;
}

.max-w-\[1440px\] {
    max-width: 1440px;
}

.max-w-\[150px\] {
    max-width: 150px;
}

.max-w-\[16ch\] {
    max-width: 16ch;
}

.max-w-\[18ch\] {
    max-width: 18ch;
}

.max-w-\[36ch\] {
    max-width: 36ch;
}

.max-w-\[38ch\] {
    max-width: 38ch;
}

.max-w-\[40ch\] {
    max-width: 40ch;
}

.max-w-\[42ch\] {
    max-width: 42ch;
}

.max-w-\[440px\] {
    max-width: 440px;
}

.max-w-\[44ch\] {
    max-width: 44ch;
}

.max-w-\[46ch\] {
    max-width: 46ch;
}

.max-w-\[48ch\] {
    max-width: 48ch;
}

.max-w-\[50ch\] {
    max-width: 50ch;
}

.max-w-\[520px\] {
    max-width: 520px;
}

.max-w-\[52ch\] {
    max-width: 52ch;
}

.max-w-\[540px\] {
    max-width: 540px;
}

.max-w-\[54ch\] {
    max-width: 54ch;
}

.max-w-\[560px\] {
    max-width: 560px;
}

.max-w-\[56ch\] {
    max-width: 56ch;
}

.max-w-\[58ch\] {
    max-width: 58ch;
}

.max-w-\[600px\] {
    max-width: 600px;
}

.max-w-\[60ch\] {
    max-width: 60ch;
}

.max-w-\[620px\] {
    max-width: 620px;
}

.max-w-\[62ch\] {
    max-width: 62ch;
}

.max-w-\[640px\] {
    max-width: 640px;
}

.max-w-\[64ch\] {
    max-width: 64ch;
}

.max-w-\[66ch\] {
    max-width: 66ch;
}

.max-w-\[680px\] {
    max-width: 680px;
}

.max-w-\[68ch\] {
    max-width: 68ch;
}

.max-w-\[700px\] {
    max-width: 700px;
}

.max-w-\[70ch\] {
    max-width: 70ch;
}

.max-w-\[720px\] {
    max-width: 720px;
}

.max-w-\[72ch\] {
    max-width: 72ch;
}

.max-w-\[760px\] {
    max-width: 760px;
}

.max-w-\[76ch\] {
    max-width: 76ch;
}

.max-w-\[780px\] {
    max-width: 780px;
}

.max-w-\[80ch\] {
    max-width: 80ch;
}

.max-w-\[820px\] {
    max-width: 820px;
}

.max-w-\[84ch\] {
    max-width: 84ch;
}

.max-w-\[860px\] {
    max-width: 860px;
}

.max-w-\[86ch\] {
    max-width: 86ch;
}

.max-w-\[880px\] {
    max-width: 880px;
}

.max-w-\[88ch\] {
    max-width: 88ch;
}

.max-w-\[900px\] {
    max-width: 900px;
}

.max-w-\[920px\] {
    max-width: 920px;
}

.max-w-\[96ch\] {
    max-width: 96ch;
}

.max-w-full {
    max-width: 100%;
}

.max-w-none {
    max-width: none;
}

.flex-1 {
    flex: 1 1 0%;
}

.shrink {
    flex-shrink: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

.grow {
    flex-grow: 1;
}

.border-collapse {
    border-collapse: collapse;
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-3 {
    --tw-translate-y: 0.75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.resize-none {
    resize: none;
}

.resize {
    resize: both;
}

.scroll-mt-28 {
    scroll-margin-top: 7rem;
}

.list-decimal {
    list-style-type: decimal;
}

.list-disc {
    list-style-type: disc;
}

.columns-1 {
    -moz-columns: 1;
    columns: 1;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-\[\.8fr_1\.4fr\] {
    grid-template-columns: .8fr 1.4fr;
}

.grid-cols-\[1\.35fr_1fr\] {
    grid-template-columns: 1.35fr 1fr;
}

.grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
}

.grid-cols-\[2\.5rem_1fr\] {
    grid-template-columns: 2.5rem 1fr;
}

.grid-cols-\[2rem_1fr\] {
    grid-template-columns: 2rem 1fr;
}

.grid-cols-\[2rem_1fr_auto_auto\] {
    grid-template-columns: 2rem 1fr auto auto;
}

.grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
}

.grid-cols-\[minmax\(0\2c 10\.5rem\)_1fr\] {
    grid-template-columns: minmax(0, 10.5rem) 1fr;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.content-start {
    align-content: flex-start;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-0\.5 {
    gap: 0.125rem;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-2\.5 {
    gap: 0.625rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-3\.5 {
    gap: 0.875rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-px {
    gap: 1px;
}

.gap-x-12 {
    -moz-column-gap: 3rem;
    column-gap: 3rem;
}

.gap-x-14 {
    -moz-column-gap: 3.5rem;
    column-gap: 3.5rem;
}

.gap-x-3 {
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
}

.gap-x-4 {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}

.gap-x-5 {
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
}

.gap-x-6 {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
}

.gap-y-1 {
    row-gap: 0.25rem;
}

.gap-y-1\.5 {
    row-gap: 0.375rem;
}

.gap-y-10 {
    row-gap: 2.5rem;
}

.gap-y-2 {
    row-gap: 0.5rem;
}

.gap-y-2\.5 {
    row-gap: 0.625rem;
}

.gap-y-3 {
    row-gap: 0.75rem;
}

.gap-y-4 {
    row-gap: 1rem;
}

.gap-y-6 {
    row-gap: 1.5rem;
}

.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
    margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-7 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.space-y-9 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-ink-100 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-divide-opacity, 1));
}

.self-start {
    align-self: flex-start;
}

.self-stretch {
    align-self: stretch;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-clip {
    overflow: clip;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.break-words {
    overflow-wrap: break-word;
}

.break-all {
    word-break: break-all;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-\[18px\] {
    border-radius: 18px;
}

.rounded-\[calc\(outer-0\.5rem\)\] {
    border-radius: calc(outer - 0.5rem);
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-b-2xl {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.rounded-l-2xl {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.rounded-bl-2xl {
    border-bottom-left-radius: 1rem;
}

.rounded-bl-md {
    border-bottom-left-radius: 0.375rem;
}

.rounded-br-2xl {
    border-bottom-right-radius: 1rem;
}

.rounded-br-md {
    border-bottom-right-radius: 0.375rem;
}

.rounded-tl-2xl {
    border-top-left-radius: 1rem;
}

.rounded-tr-2xl {
    border-top-right-radius: 1rem;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-2 {
    border-width: 2px;
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px;
}

.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-l {
    border-left-width: 1px;
}

.border-l-2 {
    border-left-width: 2px;
}

.border-r {
    border-right-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border-dashed {
    border-style: dashed;
}

.border-ink-100 {
    --tw-border-opacity: 1;
    border-color: rgb(241 242 246 / var(--tw-border-opacity, 1));
}

.border-ink-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-ink-200\/60 {
    border-color: rgb(229 231 235 / 0.6);
}

.border-ink-200\/70 {
    border-color: rgb(229 231 235 / 0.7);
}

.border-ink-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-ink-900\/10 {
    border-color: rgb(17 24 39 / 0.1);
}

.border-mint-200 {
    --tw-border-opacity: 1;
    border-color: rgb(179 233 209 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: rgb(251 201 191 / var(--tw-border-opacity, 1));
}

.border-orange-200\/60 {
    border-color: rgb(251 201 191 / 0.6);
}

.border-orange-400 {
    --tw-border-opacity: 1;
    border-color: rgb(245 137 113 / var(--tw-border-opacity, 1));
}

.border-teal-400 {
    --tw-border-opacity: 1;
    border-color: rgb(44 195 219 / var(--tw-border-opacity, 1));
}

.border-teal-500 {
    --tw-border-opacity: 1;
    border-color: rgb(12 169 195 / var(--tw-border-opacity, 1));
}

.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15 {
    border-color: rgb(255 255 255 / 0.15);
}

.border-white\/25 {
    border-color: rgb(255 255 255 / 0.25);
}

.border-t-transparent {
    border-top-color: transparent;
}

.bg-\[\#0F8A7A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 138 122 / var(--tw-bg-opacity, 1));
}

.bg-\[\#191919\] {
    --tw-bg-opacity: 1;
    background-color: rgb(25 25 25 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1B1F29\] {
    --tw-bg-opacity: 1;
    background-color: rgb(27 31 41 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1F2937\] {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-\[\#28C840\] {
    --tw-bg-opacity: 1;
    background-color: rgb(40 200 64 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2B7FD4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(43 127 212 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2CC3DB66\] {
    background-color: #2CC3DB66;
}

.bg-\[\#7A5AF8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(122 90 248 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DDF6EA\] {
    --tw-bg-opacity: 1;
    background-color: rgb(221 246 234 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E0692F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(224 105 47 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E5F2FF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(229 242 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F1DFFC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(241 223 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F2FCFC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(242 252 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F4F7FB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 247 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F5897166\] {
    background-color: #F5897166;
}

.bg-\[\#F7F9FA\] {
    --tw-bg-opacity: 1;
    background-color: rgb(247 249 250 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F7FAFC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FCE1E4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(252 225 228 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FCFBF3\] {
    --tw-bg-opacity: 1;
    background-color: rgb(252 251 243 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEBC2E\] {
    --tw-bg-opacity: 1;
    background-color: rgb(254 188 46 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FF5F57\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 95 87 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FFE8D6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 232 214 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FFF4CC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 244 204 / var(--tw-bg-opacity, 1));
}

.bg-\[rgba\(243\2c 111\2c 90\2c \.16\)\] {
    background-color: rgba(243, 111, 90, .16);
}

.bg-\[rgba\(44\2c 195\2c 219\2c \.14\)\] {
    background-color: rgba(44, 195, 219, .14);
}

.bg-\[rgba\(44\2c 195\2c 219\2c \.16\)\] {
    background-color: rgba(44, 195, 219, .16);
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/\[\.025\] {
    background-color: rgb(0 0 0 / .025);
}

.bg-black\/\[\.02\] {
    background-color: rgb(0 0 0 / .02);
}

.bg-current {
    background-color: currentColor;
}

.bg-ink-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 242 246 / var(--tw-bg-opacity, 1));
}

.bg-ink-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-ink-200\/80 {
    background-color: rgb(229 231 235 / 0.8);
}

.bg-ink-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-ink-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-ink-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.bg-ink-50\/50 {
    background-color: rgb(248 249 251 / 0.5);
}

.bg-ink-50\/60 {
    background-color: rgb(248 249 251 / 0.6);
}

.bg-ink-50\/70 {
    background-color: rgb(248 249 251 / 0.7);
}

.bg-ink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-ink-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-ink-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-ink-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-ink-900\/10 {
    background-color: rgb(17 24 39 / 0.1);
}

.bg-ink-900\/5 {
    background-color: rgb(17 24 39 / 0.05);
}

.bg-ink-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
}

.bg-ink-950\/60 {
    background-color: rgb(10 14 26 / 0.6);
}

.bg-mint-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 245 234 / var(--tw-bg-opacity, 1));
}

.bg-mint-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(237 250 244 / var(--tw-bg-opacity, 1));
}

.bg-mint-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(58 193 132 / var(--tw-bg-opacity, 1));
}

.bg-mint-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(42 164 108 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 229 224 / var(--tw-bg-opacity, 1));
}

.bg-orange-100\/70 {
    background-color: rgb(253 229 224 / 0.7);
}

.bg-orange-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 201 191 / var(--tw-bg-opacity, 1));
}

.bg-orange-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 163 146 / var(--tw-bg-opacity, 1));
}

.bg-orange-300\/80 {
    background-color: rgb(248 163 146 / 0.8);
}

.bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 137 113 / var(--tw-bg-opacity, 1));
}

.bg-orange-400\/70 {
    background-color: rgb(245 137 113 / 0.7);
}

.bg-orange-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 244 241 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 111 90 / var(--tw-bg-opacity, 1));
}

.bg-orange-500\/10 {
    background-color: rgb(243 111 90 / 0.1);
}

.bg-orange-500\/15 {
    background-color: rgb(243 111 90 / 0.15);
}

.bg-orange-500\/20 {
    background-color: rgb(243 111 90 / 0.2);
}

.bg-orange-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 90 69 / var(--tw-bg-opacity, 1));
}

.bg-teal-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(211 241 246 / var(--tw-bg-opacity, 1));
}

.bg-teal-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(167 227 237 / var(--tw-bg-opacity, 1));
}

.bg-teal-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(44 195 219 / var(--tw-bg-opacity, 1));
}

.bg-teal-400\/15 {
    background-color: rgb(44 195 219 / 0.15);
}

.bg-teal-400\/\[\.07\] {
    background-color: rgb(44 195 219 / .07);
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
}

.bg-teal-50\/50 {
    background-color: rgb(232 248 251 / 0.5);
}

.bg-teal-50\/60 {
    background-color: rgb(232 248 251 / 0.6);
}

.bg-teal-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(12 169 195 / var(--tw-bg-opacity, 1));
}

.bg-teal-500\/10 {
    background-color: rgb(12 169 195 / 0.1);
}

.bg-teal-500\/15 {
    background-color: rgb(12 169 195 / 0.15);
}

.bg-teal-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(9 145 168 / var(--tw-bg-opacity, 1));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
    background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/30 {
    background-color: rgb(255 255 255 / 0.3);
}

.bg-white\/45 {
    background-color: rgb(255 255 255 / 0.45);
}

.bg-white\/50 {
    background-color: rgb(255 255 255 / 0.5);
}

.bg-white\/60 {
    background-color: rgb(255 255 255 / 0.6);
}

.bg-white\/75 {
    background-color: rgb(255 255 255 / 0.75);
}

.bg-white\/80 {
    background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/85 {
    background-color: rgb(255 255 255 / 0.85);
}

.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/95 {
    background-color: rgb(255 255 255 / 0.95);
}

.bg-white\/\[\.04\] {
    background-color: rgb(255 255 255 / .04);
}

.bg-white\/\[\.05\] {
    background-color: rgb(255 255 255 / .05);
}

.bg-white\/\[\.06\] {
    background-color: rgb(255 255 255 / .06);
}

.bg-white\/\[\.07\] {
    background-color: rgb(255 255 255 / .07);
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-black\/45 {
    --tw-gradient-from: rgb(0 0 0 / 0.45) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-600 {
    --tw-gradient-from: #DC5A45 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(220 90 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-50 {
    --tw-gradient-from: #E8F8FB var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(232 248 251 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-teal-500 {
    --tw-gradient-to: rgb(12 169 195 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #0CA9C3 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-teal-400\/80 {
    --tw-gradient-to: rgb(44 195 219 / 0.8) var(--tw-gradient-to-position);
}

.to-teal-600 {
    --tw-gradient-to: #0991A8 var(--tw-gradient-to-position);
}

.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.object-\[50\%_45\%\] {
    -o-object-position: 50% 45%;
    object-position: 50% 45%;
}

.p-0 {
    padding: 0px;
}

.p-1 {
    padding: 0.25rem;
}

.p-1\.5 {
    padding: 0.375rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-2\.5 {
    padding: 0.625rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-3\.5 {
    padding: 0.875rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-7 {
    padding: 1.75rem;
}

.p-8 {
    padding: 2rem;
}

.p-\[2px\] {
    padding: 2px;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-1\.5 {
    padding-bottom: 0.375rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pb-12 {
    padding-bottom: 3rem;
}

.pb-14 {
    padding-bottom: 3.5rem;
}

.pb-16 {
    padding-bottom: 4rem;
}

.pb-2\.5 {
    padding-bottom: 0.625rem;
}

.pb-20 {
    padding-bottom: 5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-40 {
    padding-bottom: 10rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-10 {
    padding-left: 2.5rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pl-2\.5 {
    padding-left: 0.625rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pl-6 {
    padding-left: 1.5rem;
}

.pl-9 {
    padding-left: 2.25rem;
}

.pr-1\.5 {
    padding-right: 0.375rem;
}

.pr-11 {
    padding-right: 2.75rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-2\.5 {
    padding-right: 0.625rem;
}

.pr-24 {
    padding-right: 6rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-1\.5 {
    padding-top: 0.375rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pt-16 {
    padding-top: 4rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pt-28 {
    padding-top: 7rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-32 {
    padding-top: 8rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-7 {
    padding-top: 1.75rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pt-\[3px\] {
    padding-top: 3px;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.align-top {
    vertical-align: top;
}

.align-\[-1px\] {
    vertical-align: -1px;
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
    font-family: Manrope, system-ui, sans-serif;
}

.font-serif {
    font-family: Newsreader, Georgia, serif;
}

.text-xs {
    font-size:0.75rem;
    line-height: 1rem; /* calc(1 / 0.75) */
}

.text-sm {
    font-size:  0.875rem;
    /*line-height:  1.25rem; !* calc(1.25 / 0.875) *!*/
}

.text-base {
    font-size:  1rem; /* 1rem (16px) */
    line-height:  1.5rem; /* calc(1.5 / 1) */
}

.text-lg {
    font-size: 1.125rem /*(18px) */;
    /*line-height: 1.75rem; !* calc(1.75 / 1.125) *!*/
}

.text-xl {
    font-size: 1.25rem /*(20px) */;
    /*line-height: 1.75rem; !* calc(1.75 / 1.25) *!*/
}

.text-2xl {
    font-size: 1.5rem /*(24px) */;
    /*line-height: 2rem; !* calc(2 / 1.5) *!*/
}

.text-3xl {

    font-size: 1.875rem /*(30px) */;
    /*line-height: 2.25rem; !* calc(2.25 / 1.875) *!*/
}

.text-4xl {

    font-size: 2.25rem /*(36px) */;
    /*line-height: 2.5rem; !* calc(2.5 / 2.25) *!*/
}

.text-5xl {

    font-size: 3rem /*(48px) */;
    line-height: 1; /* 1 */
}

.text-6xl {

    font-size: 3.75rem /*(60px) */;
    /*line-height: 1; !* 1 *!*/
}

.text-7xl {

    font-size: 4.5rem /*(72px) */;
    /*line-height: 1; !* 1 *!*/
}

.text-8xl {

    font-size: 6rem /*(96px) */;
    /*line-height: 1; !* 1 *!*/
}

.text-9xl {

    font-size: 8rem /*(128px) */;
    /*line-height: 1; !* 1 *!*/
}

.text-\[\.9em\] {
    font-size: .9em;
}

.text-\[10\.5px\] {
    font-size: 10.5px;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11\.5px\] {
    font-size: 11.5px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[12\.5px\] {
    font-size: 12.5px;
}

.text-\[12px\] {
    font-size: 12px;
}

.text-\[13\.5px\] {
    font-size: 13.5px;
}

.text-\[13px\] {
    font-size: 13px;
}

.text-\[14\.5px\] {
    font-size: 14.5px;
}

.text-\[14px\] {
    font-size: 14px;
}

.text-\[15\.5px\] {
    font-size: 15.5px;
}

.text-\[15px\] {
    font-size: 15px;
}

.text-\[16px\] {
    font-size: 16px;
}

.text-\[17\.5px\] {
    font-size: 17.5px;
}

.text-\[17px\] {
    font-size: 17px;
}

.text-\[18px\] {
    font-size: 18px;
}

.text-\[19px\] {
    font-size: 19px;
}

.text-\[20px\] {
    font-size: 20px;
}

.text-\[21px\] {
    font-size: 21px;
}

.text-\[22px\] {
    font-size: 22px;
}

.text-\[24px\] {
    font-size: 24px;
}

.text-\[26px\] {
    font-size: 26px;
}

.text-\[27px\] {
    font-size: 27px;
}

.text-\[28px\] {
    font-size: 28px;
}

.text-\[29px\] {
    font-size: 29px;
}

.text-\[31px\] {
    font-size: 31px;
}

.text-\[34px\] {
    font-size: 34px;
}

.text-\[44px\] {
    font-size: 44px;
}

.text-\[46px\] {
    font-size: 46px;
}

.text-\[8px\] {
    font-size: 8px;
}

.text-\[9\.5px\] {
    font-size: 9.5px;
}

.text-\[9px\] {
    font-size: 9px;
}

.text-\[clamp\(1\.05rem\2c 1\.6vw\2c 1\.3rem\)\] {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

.text-\[clamp\(1\.25rem\2c 2\.2vw\2c 1\.7rem\)\] {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}

.text-\[clamp\(1\.2rem\2c 1\.6vw\2c 1\.375rem\)\] {
    font-size: clamp(1.2rem, 1.6vw, 1.375rem);
}

.text-\[clamp\(1\.35rem\2c 2\.2vw\2c 1\.75rem\)\] {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.text-\[clamp\(1\.35rem\2c 2\.2vw\2c 1\.85rem\)\] {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

.text-\[clamp\(1\.35rem\2c 2\.4vw\2c 2rem\)\] {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.text-\[clamp\(1\.3rem\2c 2\.3vw\2c 1\.85rem\)\] {
    font-size: clamp(1.3rem, 2.3vw, 1.85rem);
}

.text-\[clamp\(1\.5rem\2c 2\.4vw\2c 2rem\)\] {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.text-\[clamp\(1\.6rem\2c 2\.6vw\2c 2\.1rem\)\] {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.text-\[clamp\(1\.6rem\2c 2\.8vw\2c 2\.4rem\)\] {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.text-\[clamp\(1\.7rem\2c 3vw\2c 2\.5rem\)\] {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.text-\[clamp\(1\.8rem\2c 2\.8vw\2c 2\.3rem\)\] {
    font-size: clamp(1.8rem, 2.8vw, 2.3rem);
}

.text-\[clamp\(1\.8rem\2c 3vw\2c 2\.3rem\)\] {
    font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.text-\[clamp\(1\.9rem\2c 3\.4vw\2c 2\.9rem\)\] {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}

.text-\[clamp\(2\.1rem\2c 4\.4vw\2c 3\.25rem\)\] {
    font-size: clamp(2.1rem, 4.4vw, 3.25rem);
}

.text-\[clamp\(2\.1rem\2c 4\.4vw\2c 3\.5rem\)\] {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
}

.text-\[clamp\(2\.1rem\2c 4vw\2c 3rem\)\] {
    font-size: clamp(2.1rem, 4vw, 3rem);
}

.text-\[clamp\(2\.2rem\2c 3\.2vw\2c 2\.9rem\)\] {
    font-size: clamp(2.2rem, 3.2vw, 2.9rem);
}

.text-\[clamp\(2\.2rem\2c 4\.4vw\2c 3\.25rem\)\] {
    font-size: clamp(2.2rem, 4.4vw, 3.25rem);
}

.text-\[clamp\(2\.2rem\2c 4\.6vw\2c 3\.6rem\)\] {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}

.text-\[clamp\(2\.2rem\2c 4\.8vw\2c 3\.6rem\)\] {
    font-size: clamp(2.2rem, 4.8vw, 3.6rem);
}

.text-\[clamp\(2\.3rem\2c 5vw\2c 3\.8rem\)\] {
    font-size: clamp(2.3rem, 5vw, 3.8rem);
}

.text-\[clamp\(2\.4rem\2c 5\.5vw\2c 3\.6rem\)\] {
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
}

.text-\[clamp\(2\.4rem\2c 5\.5vw\2c 4\.35rem\)\] {
    font-size: clamp(2.4rem, 5.5vw, 4.35rem);
}

.text-\[clamp\(2\.4rem\2c 5\.5vw\2c 4rem\)\] {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
}

.text-\[clamp\(2\.4rem\2c 5vw\2c 3\.6rem\)\] {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.text-\[clamp\(2\.6rem\2c 4vw\2c 3\.4rem\)\] {
    font-size: clamp(2.6rem, 4vw, 3.4rem);
}

.text-\[clamp\(2rem\2c 4vw\2c 3\.4rem\)\] {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.text-\[clamp\(3rem\2c 6vw\2c 4\.4rem\)\] {
    font-size: clamp(3rem, 6vw, 4.4rem);
}

.text-\[clamp\(3rem\2c 6vw\2c 4\.5rem\)\] {
    font-size: clamp(3rem, 6vw, 4.5rem);
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.normal-case {
    text-transform: none;
}

.italic {
    font-style: italic;
}

.not-italic {
    font-style: normal;
}

.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[\.98\] {
    line-height: .98;
}

.leading-\[1\.02\] {
    line-height: 1.02;
}

.leading-\[1\.04\] {
    line-height: 1.04;
}

.leading-\[1\.05\] {
    line-height: 1.05;
}

.leading-\[1\.06\] {
    line-height: 1.06;
}

.leading-\[1\.08\] {
    line-height: 1.08;
}

.leading-\[1\.15\] {
    line-height: 1.15;
}

.leading-\[1\.1\] {
    line-height: 1.1;
}

.leading-\[1\.25\] {
    line-height: 1.25;
}

.leading-\[1\.2\] {
    line-height: 1.2;
}

.leading-\[1\.32\] {
    line-height: 1.32;
}

.leading-\[1\.3\] {
    line-height: 1.3;
}

.leading-\[1\.42\] {
    line-height: 1.42;
}

.leading-\[1\.45\] {
    line-height: 1.45;
}

.leading-\[1\.5\] {
    line-height: 1.5;
}

.leading-\[1\.6\] {
    line-height: 1.6;
}

.leading-\[1\.72\] {
    line-height: 1.72;
}

.leading-\[1\.75\] {
    line-height: 1.75;
}

.leading-\[1\.7\] {
    line-height: 1.7;
}

.leading-\[1\.85\] {
    line-height: 1.85;
}

.leading-\[1\.8\] {
    line-height: 1.8;
}

.leading-\[1\.9\] {
    line-height: 1.9;
}

.leading-none {
    line-height: 1;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-snug {
    line-height: 1.375;
}

.leading-tight {
    line-height: 1.25;
}

.tracking-\[0\.12em\] {
    letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
    letter-spacing: 0.14em;
}

.tracking-\[0\.16em\] {
    letter-spacing: 0.16em;
}

.tracking-\[0\.18em\] {
    letter-spacing: 0.18em;
}

.tracking-\[0\.1em\] {
    letter-spacing: 0.1em;
}

.tracking-\[0\.22em\] {
    letter-spacing: 0.22em;
}

.tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}

.tracking-normal {
    letter-spacing: 0em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-tightest {
    letter-spacing: -0.035em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.text-\[\#111827\] {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-\[\#16704A\] {
    --tw-text-opacity: 1;
    color: rgb(22 112 74 / var(--tw-text-opacity, 1));
}

.text-\[\#191919\] {
    --tw-text-opacity: 1;
    color: rgb(25 25 25 / var(--tw-text-opacity, 1));
}

.text-\[\#191919\]\/50 {
    color: rgb(25 25 25 / 0.5);
}

.text-\[\#191919\]\/60 {
    color: rgb(25 25 25 / 0.6);
}

.text-\[\#191919\]\/70 {
    color: rgb(25 25 25 / 0.7);
}

.text-\[\#191919\]\/75 {
    color: rgb(25 25 25 / 0.75);
}

.text-\[\#191919\]\/80 {
    color: rgb(25 25 25 / 0.8);
}

.text-\[\#1C5FA8\] {
    --tw-text-opacity: 1;
    color: rgb(28 95 168 / var(--tw-text-opacity, 1));
}

.text-\[\#1E7FD0\] {
    --tw-text-opacity: 1;
    color: rgb(30 127 208 / var(--tw-text-opacity, 1));
}

.text-\[\#374151\] {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-\[\#3B3226\] {
    --tw-text-opacity: 1;
    color: rgb(59 50 38 / var(--tw-text-opacity, 1));
}

.text-\[\#4B5563\] {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-\[\#6B2F9E\] {
    --tw-text-opacity: 1;
    color: rgb(107 47 158 / var(--tw-text-opacity, 1));
}

.text-\[\#6B7280\] {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-\[\#7A5A00\] {
    --tw-text-opacity: 1;
    color: rgb(122 90 0 / var(--tw-text-opacity, 1));
}

.text-\[\#9CA3AF\] {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-\[\#A04A0C\] {
    --tw-text-opacity: 1;
    color: rgb(160 74 12 / var(--tw-text-opacity, 1));
}

.text-\[\#A3243A\] {
    --tw-text-opacity: 1;
    color: rgb(163 36 58 / var(--tw-text-opacity, 1));
}

.text-ink-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-ink-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-ink-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-ink-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-ink-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-ink-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-ink-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-ink-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-ink-900\/55 {
    color: rgb(17 24 39 / 0.55);
}

.text-mint-600 {
    --tw-text-opacity: 1;
    color: rgb(42 164 108 / var(--tw-text-opacity, 1));
}

.text-mint-700 {
    --tw-text-opacity: 1;
    color: rgb(27 122 80 / var(--tw-text-opacity, 1));
}

.text-orange-200 {
    --tw-text-opacity: 1;
    color: rgb(251 201 191 / var(--tw-text-opacity, 1));
}

.text-orange-300 {
    --tw-text-opacity: 1;
    color: rgb(248 163 146 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(243 111 90 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(220 90 69 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
    --tw-text-opacity: 1;
    color: rgb(184 68 49 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
    --tw-text-opacity: 1;
    color: rgb(140 46 31 / var(--tw-text-opacity, 1));
}

.text-teal-300 {
    --tw-text-opacity: 1;
    color: rgb(110 215 232 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
    --tw-text-opacity: 1;
    color: rgb(9 145 168 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: rgb(6 116 138 / var(--tw-text-opacity, 1));
}

.text-teal-800 {
    --tw-text-opacity: 1;
    color: rgb(4 85 102 / var(--tw-text-opacity, 1));
}

.text-transparent {
    color: transparent;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/20 {
    color: rgb(255 255 255 / 0.2);
}

.text-white\/30 {
    color: rgb(255 255 255 / 0.3);
}

.text-white\/35 {
    color: rgb(255 255 255 / 0.35);
}

.text-white\/40 {
    color: rgb(255 255 255 / 0.4);
}

.text-white\/45 {
    color: rgb(255 255 255 / 0.45);
}

.text-white\/50 {
    color: rgb(255 255 255 / 0.5);
}

.text-white\/55 {
    color: rgb(255 255 255 / 0.55);
}

.text-white\/60 {
    color: rgb(255 255 255 / 0.6);
}

.text-white\/65 {
    color: rgb(255 255 255 / 0.65);
}

.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
    color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
    color: rgb(255 255 255 / 0.85);
}

.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
}

.decoration-\[\#191919\]\/30 {
    -webkit-text-decoration-color: rgb(25 25 25 / 0.3);
    text-decoration-color: rgb(25 25 25 / 0.3);
}

.decoration-\[\#1E7FD0\]\/30 {
    -webkit-text-decoration-color: rgb(30 127 208 / 0.3);
    text-decoration-color: rgb(30 127 208 / 0.3);
}

.decoration-ink-300 {
    -webkit-text-decoration-color: #D1D5DB;
    text-decoration-color: #D1D5DB;
}

.decoration-orange-300 {
    -webkit-text-decoration-color: #F8A392;
    text-decoration-color: #F8A392;
}

.decoration-teal-200 {
    -webkit-text-decoration-color: #A7E3ED;
    text-decoration-color: #A7E3ED;
}

.decoration-teal-300 {
    -webkit-text-decoration-color: #6ED7E8;
    text-decoration-color: #6ED7E8;
}

.decoration-teal-600\/30 {
    -webkit-text-decoration-color: rgb(9 145 168 / 0.3);
    text-decoration-color: rgb(9 145 168 / 0.3);
}

.decoration-white\/30 {
    -webkit-text-decoration-color: rgb(255 255 255 / 0.3);
    text-decoration-color: rgb(255 255 255 / 0.3);
}

.decoration-white\/40 {
    -webkit-text-decoration-color: rgb(255 255 255 / 0.4);
    text-decoration-color: rgb(255 255 255 / 0.4);
}

.underline-offset-2 {
    text-underline-offset: 2px;
}

.underline-offset-4 {
    text-underline-offset: 4px;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.accent-teal-600 {
    accent-color: #0991A8;
}

.opacity-0 {
    opacity: 0;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-90 {
    opacity: 0.9;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-diffuse {
    --tw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 40px -15px rgba(0, 0, 0, .08);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 20px 40px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-diffuse-lg {
    --tw-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 32px 64px -16px rgba(0, 0, 0, .12);
    --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color), 0 32px 64px -16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner-hl {
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.outline {
    outline-style: solid;
}

.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-\[1\.5px\] {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
    --tw-ring-inset: inset;
}

.ring-\[\#E4E8EE\] {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(228 232 238 / var(--tw-ring-opacity, 1));
}

.ring-\[\#E5E5DD\] {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(229 229 221 / var(--tw-ring-opacity, 1));
}

.ring-black {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-black\/10 {
    --tw-ring-color: rgb(0 0 0 / 0.1);
}

.ring-black\/5 {
    --tw-ring-color: rgb(0 0 0 / 0.05);
}

.ring-black\/\[\.03\] {
    --tw-ring-color: rgb(0 0 0 / .03);
}

.ring-black\/\[\.04\] {
    --tw-ring-color: rgb(0 0 0 / .04);
}

.ring-black\/\[\.05\] {
    --tw-ring-color: rgb(0 0 0 / .05);
}

.ring-black\/\[\.06\] {
    --tw-ring-color: rgb(0 0 0 / .06);
}

.ring-black\/\[\.12\] {
    --tw-ring-color: rgb(0 0 0 / .12);
}

.ring-ink-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}

.ring-ink-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.ring-mint-500\/20 {
    --tw-ring-color: rgb(58 193 132 / 0.2);
}

.ring-mint-500\/40 {
    --tw-ring-color: rgb(58 193 132 / 0.4);
}

.ring-orange-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(251 201 191 / var(--tw-ring-opacity, 1));
}

.ring-orange-200\/60 {
    --tw-ring-color: rgb(251 201 191 / 0.6);
}

.ring-orange-400\/45 {
    --tw-ring-color: rgb(245 137 113 / 0.45);
}

.ring-orange-500\/10 {
    --tw-ring-color: rgb(243 111 90 / 0.1);
}

.ring-orange-500\/15 {
    --tw-ring-color: rgb(243 111 90 / 0.15);
}

.ring-teal-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(211 241 246 / var(--tw-ring-opacity, 1));
}

.ring-teal-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(167 227 237 / var(--tw-ring-opacity, 1));
}

.ring-teal-200\/70 {
    --tw-ring-color: rgb(167 227 237 / 0.7);
}

.ring-teal-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(110 215 232 / var(--tw-ring-opacity, 1));
}

.ring-teal-400\/25 {
    --tw-ring-color: rgb(44 195 219 / 0.25);
}

.ring-teal-400\/30 {
    --tw-ring-color: rgb(44 195 219 / 0.3);
}

.ring-teal-500\/15 {
    --tw-ring-color: rgb(12 169 195 / 0.15);
}

.ring-teal-600\/10 {
    --tw-ring-color: rgb(9 145 168 / 0.1);
}

.ring-teal-600\/15 {
    --tw-ring-color: rgb(9 145 168 / 0.15);
}

.ring-teal-600\/45 {
    --tw-ring-color: rgb(9 145 168 / 0.45);
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-white\/10 {
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

.ring-white\/15 {
    --tw-ring-color: rgb(255 255 255 / 0.15);
}

.ring-white\/20 {
    --tw-ring-color: rgb(255 255 255 / 0.2);
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[3px\] {
    --tw-blur: blur(3px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0 {
    --tw-brightness: brightness(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-\[opacity\2c transform\2c background-color\] {
    transition-property: opacity, transform, background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[writing-mode\:vertical-rl\] {
    writing-mode: vertical-rl;
}

.marker\:font-bold *::marker {
    font-weight: 700;
}

.marker\:text-ink-300 *::marker {
    color: rgb(209 213 219);
}

.marker\:text-ink-400 *::marker {
    color: rgb(156 163 175);
}

.marker\:font-bold::marker {
    font-weight: 700;
}

.marker\:text-ink-300::marker {
    color: rgb(209 213 219);
}

.marker\:text-ink-400::marker {
    color: rgb(156 163 175);
}

.first\:mt-0:first-child {
    margin-top: 0px;
}

.first\:pt-0:first-child {
    padding-top: 0px;
}

.last\:mb-0:last-child {
    margin-bottom: 0px;
}

.last\:border-0:last-child {
    border-width: 0px;
}

.last\:pb-0:last-child {
    padding-bottom: 0px;
}

.last\:pr-0:last-child {
    padding-right: 0px;
}

.first-of-type\:mt-0:first-of-type {
    margin-top: 0px;
}

.focus-within\:ring-2:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-teal-500:focus-within {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(12 169 195 / var(--tw-ring-opacity, 1));
}

.focus-within\:ring-offset-2:focus-within {
    --tw-ring-offset-width: 2px;
}

.hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.03\]:hover {
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-ink-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-black:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.hover\:bg-ink-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 242 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-ink-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-ink-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-ink-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-ink-900\/5:hover {
    background-color: rgb(17 24 39 / 0.05);
}

.hover\:bg-orange-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 90 69 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(184 68 49 / var(--tw-bg-opacity, 1));
}

.hover\:bg-teal-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(232 248 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-teal-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(6 116 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05);
}

.hover\:bg-white\/90:hover {
    background-color: rgb(255 255 255 / 0.9);
}

.hover\:bg-white\/\[\.08\]:hover {
    background-color: rgb(255 255 255 / .08);
}

.hover\:bg-white\/\[\.1\]:hover {
    background-color: rgb(255 255 255 / .1);
}

.hover\:text-ink-700:hover {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-ink-900:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-ink-950:hover {
    --tw-text-opacity: 1;
    color: rgb(10 14 26 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-800:hover {
    --tw-text-opacity: 1;
    color: rgb(140 46 31 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-300:hover {
    --tw-text-opacity: 1;
    color: rgb(110 215 232 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-800:hover {
    --tw-text-opacity: 1;
    color: rgb(4 85 102 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-white\/70:hover {
    color: rgb(255 255 255 / 0.7);
}

.hover\:decoration-\[\#191919\]:hover {
    -webkit-text-decoration-color: #191919;
    text-decoration-color: #191919;
}

.hover\:decoration-\[\#1E7FD0\]:hover {
    -webkit-text-decoration-color: #1E7FD0;
    text-decoration-color: #1E7FD0;
}

.hover\:decoration-ink-500:hover {
    -webkit-text-decoration-color: #6B7280;
    text-decoration-color: #6B7280;
}

.hover\:decoration-ink-900:hover {
    -webkit-text-decoration-color: #111827;
    text-decoration-color: #111827;
}

.hover\:decoration-teal-500:hover {
    -webkit-text-decoration-color: #0CA9C3;
    text-decoration-color: #0CA9C3;
}

.hover\:decoration-teal-600:hover {
    -webkit-text-decoration-color: #0991A8;
    text-decoration-color: #0991A8;
}

.hover\:decoration-white:hover {
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
}

.hover\:ring-\[\#1E7FD0\]:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(30 127 208 / var(--tw-ring-opacity, 1));
}

.hover\:ring-black\/10:hover {
    --tw-ring-color: rgb(0 0 0 / 0.1);
}

.hover\:ring-black\/20:hover {
    --tw-ring-color: rgb(0 0 0 / 0.2);
}

.hover\:ring-ink-300:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.hover\:ring-teal-600:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(9 145 168 / var(--tw-ring-opacity, 1));
}

.focus\:ring-teal-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(12 169 195 / var(--tw-ring-opacity, 1));
}

.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
    outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
    outline-width: 2px;
}

.focus-visible\:outline-offset-0:focus-visible {
    outline-offset: 0px;
}

.focus-visible\:outline-teal-500:focus-visible {
    outline-color: #0CA9C3;
}

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-teal-600:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(9 145 168 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-teal-600\/35:focus-visible {
    --tw-ring-color: rgb(9 145 168 / 0.35);
}

.active\:bg-ink-950:active {
    --tw-bg-opacity: 1;
    background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
}

.active\:bg-orange-800:active {
    --tw-bg-opacity: 1;
    background-color: rgb(140 46 31 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:-translate-x-0\.5 {
    --tw-translate-x: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-ink-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-ink-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-teal-600 {
    --tw-text-opacity: 1;
    color: rgb(9 145 168 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-teal-700 {
    --tw-text-opacity: 1;
    color: rgb(6 116 138 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
    .sm\:absolute {
        position: absolute;
    }

    .sm\:-left-4 {
        left: -1rem;
    }

    .sm\:-right-4 {
        right: -1rem;
    }

    .sm\:bottom-10 {
        bottom: 2.5rem;
    }

    .sm\:bottom-14 {
        bottom: 3.5rem;
    }

    .sm\:bottom-7 {
        bottom: 1.75rem;
    }

    .sm\:left-6 {
        left: 1.5rem;
    }

    .sm\:right-7 {
        right: 1.75rem;
    }

    .sm\:top-10 {
        top: 2.5rem;
    }

    .sm\:top-8 {
        top: 2rem;
    }

    .sm\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .sm\:col-start-3 {
        grid-column-start: 3;
    }

    .sm\:col-start-auto {
        grid-column-start: auto;
    }

    .sm\:row-span-1 {
        grid-row: span 1 / span 1;
    }

    .sm\:-mx-1\.5 {
        margin-left: -0.375rem;
        margin-right: -0.375rem;
    }

    .sm\:-mx-5 {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }

    .sm\:-mx-6 {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .sm\:mx-0 {
        margin-left: 0px;
        margin-right: 0px;
    }

    .sm\:my-10 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .sm\:my-9 {
        margin-top: 2.25rem;
        margin-bottom: 2.25rem;
    }

    .sm\:-ml-5 {
        margin-left: -1.25rem;
    }

    .sm\:-mr-5 {
        margin-right: -1.25rem;
    }

    .sm\:mb-0 {
        margin-bottom: 0px;
    }

    .sm\:mb-10 {
        margin-bottom: 2.5rem;
    }

    .sm\:mb-11 {
        margin-bottom: 2.75rem;
    }

    .sm\:mb-12 {
        margin-bottom: 3rem;
    }

    .sm\:mb-16 {
        margin-bottom: 4rem;
    }

    .sm\:mb-4 {
        margin-bottom: 1rem;
    }

    .sm\:mb-5 {
        margin-bottom: 1.25rem;
    }

    .sm\:mb-6 {
        margin-bottom: 1.5rem;
    }

    .sm\:mb-7 {
        margin-bottom: 1.75rem;
    }

    .sm\:mb-8 {
        margin-bottom: 2rem;
    }

    .sm\:mb-9 {
        margin-bottom: 2.25rem;
    }

    .sm\:ml-auto {
        margin-left: auto;
    }

    .sm\:mt-0 {
        margin-top: 0px;
    }

    .sm\:mt-10 {
        margin-top: 2.5rem;
    }

    .sm\:mt-12 {
        margin-top: 3rem;
    }

    .sm\:mt-14 {
        margin-top: 3.5rem;
    }

    .sm\:mt-16 {
        margin-top: 4rem;
    }

    .sm\:mt-5 {
        margin-top: 1.25rem;
    }

    .sm\:mt-6 {
        margin-top: 1.5rem;
    }

    .sm\:mt-7 {
        margin-top: 1.75rem;
    }

    .sm\:mt-8 {
        margin-top: 2rem;
    }

    .sm\:mt-9 {
        margin-top: 2.25rem;
    }

    .sm\:block {
        display: block;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:inline-flex {
        display: inline-flex;
    }

    .sm\:table-cell {
        display: table-cell;
    }

    .sm\:grid {
        display: grid;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:h-10 {
        height: 2.5rem;
    }

    .sm\:h-11 {
        height: 2.75rem;
    }

    .sm\:h-12 {
        height: 3rem;
    }

    .sm\:h-14 {
        height: 3.5rem;
    }

    .sm\:h-20 {
        height: 5rem;
    }

    .sm\:h-24 {
        height: 6rem;
    }

    .sm\:h-4 {
        height: 1rem;
    }

    .sm\:h-6 {
        height: 1.5rem;
    }

    .sm\:h-7 {
        height: 1.75rem;
    }

    .sm\:h-\[340px\] {
        height: 340px;
    }

    .sm\:h-\[72px\] {
        height: 72px;
    }

    .sm\:w-11 {
        width: 2.75rem;
    }

    .sm\:w-12 {
        width: 3rem;
    }

    .sm\:w-20 {
        width: 5rem;
    }

    .sm\:w-24 {
        width: 6rem;
    }

    .sm\:w-32 {
        width: 8rem;
    }

    .sm\:w-4 {
        width: 1rem;
    }

    .sm\:w-6 {
        width: 1.5rem;
    }

    .sm\:w-7 {
        width: 1.75rem;
    }

    .sm\:w-\[210px\] {
        width: 210px;
    }

    .sm\:w-\[360px\] {
        width: 360px;
    }

    .sm\:w-\[72px\] {
        width: 72px;
    }

    .sm\:w-\[74px\] {
        width: 74px;
    }

    .sm\:w-auto {
        width: auto;
    }

    .sm\:min-w-0 {
        min-width: 0px;
    }

    .sm\:flex-1 {
        flex: 1 1 0%;
    }

    .sm\:columns-2 {
        -moz-columns: 2;
        columns: 2;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sm\:grid-cols-\[1\.5fr_1fr\] {
        grid-template-columns: 1.5fr 1fr;
    }

    .sm\:grid-cols-\[2\.25rem_1fr_7rem_7rem\] {
        grid-template-columns: 2.25rem 1fr 7rem 7rem;
    }

    .sm\:grid-cols-\[2\.5rem_12\.5rem_1fr\] {
        grid-template-columns: 2.5rem 12.5rem 1fr;
    }

    .sm\:grid-cols-\[3rem_1fr\] {
        grid-template-columns: 3rem 1fr;
    }

    .sm\:grid-cols-\[6rem_1fr\] {
        grid-template-columns: 6rem 1fr;
    }

    .sm\:grid-cols-\[8rem_1fr\] {
        grid-template-columns: 8rem 1fr;
    }

    .sm\:grid-cols-\[9\.5rem_1fr\] {
        grid-template-columns: 9.5rem 1fr;
    }

    .sm\:grid-cols-\[9rem_1fr\] {
        grid-template-columns: 9rem 1fr;
    }

    .sm\:grid-cols-\[9rem_9rem_1fr\] {
        grid-template-columns: 9rem 9rem 1fr;
    }

    .sm\:grid-cols-\[auto_1fr_auto_auto\] {
        grid-template-columns: auto 1fr auto auto;
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:flex-col {
        flex-direction: column;
    }

    .sm\:flex-wrap {
        flex-wrap: wrap;
    }

    .sm\:items-start {
        align-items: flex-start;
    }

    .sm\:items-end {
        align-items: flex-end;
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:items-baseline {
        align-items: baseline;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:gap-0 {
        gap: 0px;
    }

    .sm\:gap-0\.5 {
        gap: 0.125rem;
    }

    .sm\:gap-1\.5 {
        gap: 0.375rem;
    }

    .sm\:gap-10 {
        gap: 2.5rem;
    }

    .sm\:gap-12 {
        gap: 3rem;
    }

    .sm\:gap-14 {
        gap: 3.5rem;
    }

    .sm\:gap-3 {
        gap: 0.75rem;
    }

    .sm\:gap-3\.5 {
        gap: 0.875rem;
    }

    .sm\:gap-4 {
        gap: 1rem;
    }

    .sm\:gap-5 {
        gap: 1.25rem;
    }

    .sm\:gap-6 {
        gap: 1.5rem;
    }

    .sm\:gap-7 {
        gap: 1.75rem;
    }

    .sm\:gap-8 {
        gap: 2rem;
    }

    .sm\:gap-9 {
        gap: 2.25rem;
    }

    .sm\:gap-x-4 {
        -moz-column-gap: 1rem;
        column-gap: 1rem;
    }

    .sm\:gap-x-5 {
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

    .sm\:gap-x-7 {
        -moz-column-gap: 1.75rem;
        column-gap: 1.75rem;
    }

    .sm\:gap-x-8 {
        -moz-column-gap: 2rem;
        column-gap: 2rem;
    }

    .sm\:gap-y-0 {
        row-gap: 0px;
    }

    .sm\:gap-y-3 {
        row-gap: 0.75rem;
    }

    .sm\:gap-y-7 {
        row-gap: 1.75rem;
    }

    .sm\:space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
    }

    .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    }

    .sm\:self-auto {
        align-self: auto;
    }

    .sm\:justify-self-end {
        justify-self: end;
    }

    .sm\:rounded-2xl {
        border-radius: 1rem;
    }

    .sm\:rounded-3xl {
        border-radius: 1.5rem;
    }

    .sm\:rounded-4xl {
        border-radius: 2rem;
    }

    .sm\:rounded-\[14px\] {
        border-radius: 14px;
    }

    .sm\:rounded-\[20px\] {
        border-radius: 20px;
    }

    .sm\:rounded-\[28px\] {
        border-radius: 28px;
    }

    .sm\:rounded-full {
        border-radius: 9999px;
    }

    .sm\:rounded-t-xl {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
    }

    .sm\:border-b-0 {
        border-bottom-width: 0px;
    }

    .sm\:border-r {
        border-right-width: 1px;
    }

    .sm\:p-12 {
        padding: 3rem;
    }

    .sm\:p-2 {
        padding: 0.5rem;
    }

    .sm\:p-3 {
        padding: 0.75rem;
    }

    .sm\:p-4 {
        padding: 1rem;
    }

    .sm\:p-5 {
        padding: 1.25rem;
    }

    .sm\:p-6 {
        padding: 1.5rem;
    }

    .sm\:p-7 {
        padding: 1.75rem;
    }

    .sm\:p-8 {
        padding: 2rem;
    }

    .sm\:p-9 {
        padding: 2.25rem;
    }

    .sm\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sm\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sm\:px-9 {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    .sm\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .sm\:py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .sm\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .sm\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .sm\:py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .sm\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .sm\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .sm\:py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .sm\:py-3\.5 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }

    .sm\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .sm\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .sm\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .sm\:py-7 {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .sm\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .sm\:py-9 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .sm\:py-\[18px\] {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .sm\:pb-10 {
        padding-bottom: 2.5rem;
    }

    .sm\:pb-14 {
        padding-bottom: 3.5rem;
    }

    .sm\:pb-16 {
        padding-bottom: 4rem;
    }

    .sm\:pb-20 {
        padding-bottom: 5rem;
    }

    .sm\:pb-24 {
        padding-bottom: 6rem;
    }

    .sm\:pb-28 {
        padding-bottom: 7rem;
    }

    .sm\:pb-5 {
        padding-bottom: 1.25rem;
    }

    .sm\:pb-7 {
        padding-bottom: 1.75rem;
    }

    .sm\:pb-8 {
        padding-bottom: 2rem;
    }

    .sm\:pl-6 {
        padding-left: 1.5rem;
    }

    .sm\:pl-7 {
        padding-left: 1.75rem;
    }

    .sm\:pr-2 {
        padding-right: 0.5rem;
    }

    .sm\:pr-6 {
        padding-right: 1.5rem;
    }

    .sm\:pt-0 {
        padding-top: 0px;
    }

    .sm\:pt-10 {
        padding-top: 2.5rem;
    }

    .sm\:pt-12 {
        padding-top: 3rem;
    }

    .sm\:pt-14 {
        padding-top: 3.5rem;
    }

    .sm\:pt-2 {
        padding-top: 0.5rem;
    }

    .sm\:pt-2\.5 {
        padding-top: 0.625rem;
    }

    .sm\:pt-32 {
        padding-top: 8rem;
    }

    .sm\:pt-36 {
        padding-top: 9rem;
    }

    .sm\:pt-4 {
        padding-top: 1rem;
    }

    .sm\:pt-5 {
        padding-top: 1.25rem;
    }

    .sm\:pt-6 {
        padding-top: 1.5rem;
    }

    .sm\:pt-7 {
        padding-top: 1.75rem;
    }

    .sm\:pt-8 {
        padding-top: 2rem;
    }

    .sm\:text-left {
        text-align: left;
    }

    .sm\:text-\[10\.5px\] {
        font-size: 10.5px;
    }

    .sm\:text-\[11\.5px\] {
        font-size: 11.5px;
    }

    .sm\:text-\[11px\] {
        font-size: 11px;
    }

    .sm\:text-\[12\.5px\] {
        font-size: 12.5px;
    }

    .sm\:text-\[12px\] {
        font-size: 12px;
    }

    .sm\:text-\[13\.5px\] {
        font-size: 13.5px;
    }

    .sm\:text-\[13px\] {
        font-size: 13px;
    }

    .sm\:text-\[14\.5px\] {
        font-size: 14.5px;
    }

    .sm\:text-\[14px\] {
        font-size: 14px;
    }

    .sm\:text-\[15\.5px\] {
        font-size: 15.5px;
    }

    .sm\:text-\[15px\] {
        font-size: 15px;
    }

    .sm\:text-\[16\.5px\] {
        font-size: 16.5px;
    }

    .sm\:text-\[16px\] {
        font-size: 16px;
    }

    .sm\:text-\[17\.5px\] {
        font-size: 17.5px;
    }

    .sm\:text-\[17px\] {
        font-size: 17px;
    }

    .sm\:text-\[18px\] {
        font-size: 18px;
    }

    .sm\:text-\[19px\] {
        font-size: 19px;
    }

    .sm\:text-\[20px\] {
        font-size: 20px;
    }

    .sm\:text-\[21px\] {
        font-size: 21px;
    }

    .sm\:text-\[22px\] {
        font-size: 22px;
    }

    .sm\:text-\[23px\] {
        font-size: 23px;
    }

    .sm\:text-\[24px\] {
        font-size: 24px;
    }

    .sm\:text-\[25px\] {
        font-size: 25px;
    }

    .sm\:text-\[26px\] {
        font-size: 26px;
    }

    .sm\:text-\[28px\] {
        font-size: 28px;
    }

    .sm\:text-\[30px\] {
        font-size: 30px;
    }

    .sm\:text-\[32px\] {
        font-size: 32px;
    }

    .sm\:text-\[34px\] {
        font-size: 34px;
    }

    .sm\:text-\[37px\] {
        font-size: 37px;
    }

    .sm\:text-\[40px\] {
        font-size: 40px;
    }

    .sm\:text-\[64px\] {
        font-size: 64px;
    }
}

@media (min-width: 768px) {
    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:mb-4 {
        margin-bottom: 1rem;
    }

    .md\:block {
        display: block;
    }

    .md\:inline {
        display: inline;
    }

    .md\:flex {
        display: flex;
    }

    .md\:inline-flex {
        display: inline-flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1\.35fr_1fr\] {
        grid-template-columns: 1.35fr 1fr;
    }

    .md\:grid-cols-\[1fr_auto\] {
        grid-template-columns: 1fr auto;
    }

    .md\:grid-cols-\[200px_1fr\] {
        grid-template-columns: 200px 1fr;
    }

    .md\:grid-cols-\[220px_1fr\] {
        grid-template-columns: 220px 1fr;
    }

    .md\:gap-10 {
        gap: 2.5rem;
    }

    .md\:gap-8 {
        gap: 2rem;
    }

    .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-x-reverse: 0;
        border-right-width: calc(1px * var(--tw-divide-x-reverse));
        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }

    .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0;
        border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
    }

    .md\:border-b-0 {
        border-bottom-width: 0px;
    }

    .md\:border-r {
        border-right-width: 1px;
    }

    .md\:pt-0\.5 {
        padding-top: 0.125rem;
    }
}

@media (min-width: 1024px) {
    .lg\:sticky {
        position: -webkit-sticky;
        position: sticky;
    }

    .lg\:-left-6 {
        left: -1.5rem;
    }

    .lg\:-right-6 {
        right: -1.5rem;
    }

    .lg\:bottom-9 {
        bottom: 2.25rem;
    }

    .lg\:right-9 {
        right: 2.25rem;
    }

    .lg\:top-24 {
        top: 6rem;
    }

    .lg\:top-28 {
        top: 7rem;
    }

    .lg\:top-32 {
        top: 8rem;
    }

    .lg\:order-1 {
        order: 1;
    }

    .lg\:order-2 {
        order: 2;
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .lg\:row-span-2 {
        grid-row: span 2 / span 2;
    }

    .lg\:-mx-10 {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
    }

    .lg\:-mx-6 {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .lg\:-my-6 {
        margin-top: -1.5rem;
        margin-bottom: -1.5rem;
    }

    .lg\:my-12 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .lg\:-ml-6 {
        margin-left: -1.5rem;
    }

    .lg\:-mr-6 {
        margin-right: -1.5rem;
    }

    .lg\:mb-10 {
        margin-bottom: 2.5rem;
    }

    .lg\:mb-11 {
        margin-bottom: 2.75rem;
    }

    .lg\:mb-12 {
        margin-bottom: 3rem;
    }

    .lg\:mb-14 {
        margin-bottom: 3.5rem;
    }

    .lg\:mb-16 {
        margin-bottom: 4rem;
    }

    .lg\:mb-20 {
        margin-bottom: 5rem;
    }

    .lg\:mb-3 {
        margin-bottom: 0.75rem;
    }

    .lg\:mb-4 {
        margin-bottom: 1rem;
    }

    .lg\:mb-5 {
        margin-bottom: 1.25rem;
    }

    .lg\:mb-6 {
        margin-bottom: 1.5rem;
    }

    .lg\:mb-7 {
        margin-bottom: 1.75rem;
    }

    .lg\:mb-8 {
        margin-bottom: 2rem;
    }

    .lg\:mb-9 {
        margin-bottom: 2.25rem;
    }

    .lg\:ml-6 {
        margin-left: 1.5rem;
    }

    .lg\:ml-8 {
        margin-left: 2rem;
    }

    .lg\:mt-10 {
        margin-top: 2.5rem;
    }

    .lg\:mt-12 {
        margin-top: 3rem;
    }

    .lg\:mt-14 {
        margin-top: 3.5rem;
    }

    .lg\:mt-16 {
        margin-top: 4rem;
    }

    .lg\:mt-5 {
        margin-top: 1.25rem;
    }

    .lg\:mt-6 {
        margin-top: 1.5rem;
    }

    .lg\:mt-7 {
        margin-top: 1.75rem;
    }

    .lg\:mt-8 {
        margin-top: 2rem;
    }

    .lg\:mt-9 {
        margin-top: 2.25rem;
    }

    .lg\:block {
        display: block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:aspect-auto {
        aspect-ratio: auto;
    }

    .lg\:w-36 {
        width: 9rem;
    }

    .lg\:w-\[400px\] {
        width: 400px;
    }

    .lg\:w-auto {
        width: auto;
    }

    .lg\:columns-3 {
        -moz-columns: 3;
        columns: 3;
    }

    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[\.85fr_1\.15fr\] {
        grid-template-columns: .85fr 1.15fr;
    }

    .lg\:grid-cols-\[\.8fr_1\.2fr\] {
        grid-template-columns: .8fr 1.2fr;
    }

    .lg\:grid-cols-\[\.92fr_1\.08fr\] {
        grid-template-columns: .92fr 1.08fr;
    }

    .lg\:grid-cols-\[\.94fr_1\.06fr\] {
        grid-template-columns: .94fr 1.06fr;
    }

    .lg\:grid-cols-\[\.95fr_1\.05fr\] {
        grid-template-columns: .95fr 1.05fr;
    }

    .lg\:grid-cols-\[\.9fr_1\.1fr\] {
        grid-template-columns: .9fr 1.1fr;
    }

    .lg\:grid-cols-\[0\.85fr_1\.15fr\] {
        grid-template-columns: 0.85fr 1.15fr;
    }

    .lg\:grid-cols-\[0\.8fr_1\.2fr\] {
        grid-template-columns: 0.8fr 1.2fr;
    }

    .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .lg\:grid-cols-\[1\.02fr_\.98fr\] {
        grid-template-columns: 1.02fr .98fr;
    }

    .lg\:grid-cols-\[1\.05fr_\.95fr\] {
        grid-template-columns: 1.05fr .95fr;
    }

    .lg\:grid-cols-\[1\.05fr_1fr\] {
        grid-template-columns: 1.05fr 1fr;
    }

    .lg\:grid-cols-\[1\.15fr_1fr\] {
        grid-template-columns: 1.15fr 1fr;
    }

    .lg\:grid-cols-\[1\.15fr_3rem_1fr_3rem_\.9fr\] {
        grid-template-columns: 1.15fr 3rem 1fr 3rem .9fr;
    }

    .lg\:grid-cols-\[1\.1fr_\.9fr\] {
        grid-template-columns: 1.1fr .9fr;
    }

    .lg\:grid-cols-\[1\.1fr_1fr\] {
        grid-template-columns: 1.1fr 1fr;
    }

    .lg\:grid-cols-\[1\.25fr_1fr\] {
        grid-template-columns: 1.25fr 1fr;
    }

    .lg\:grid-cols-\[1\.2fr_1fr\] {
        grid-template-columns: 1.2fr 1fr;
    }

    .lg\:grid-cols-\[1\.2fr_repeat\(4\2c minmax\(0\2c \.7fr\)\)\] {
        grid-template-columns: 1.2fr repeat(4, minmax(0, .7fr));
    }

    .lg\:grid-cols-\[1\.35fr_1fr\] {
        grid-template-columns: 1.35fr 1fr;
    }

    .lg\:grid-cols-\[1\.4fr_1fr\] {
        grid-template-columns: 1.4fr 1fr;
    }

    .lg\:grid-cols-\[1\.55fr_1fr\] {
        grid-template-columns: 1.55fr 1fr;
    }

    .lg\:grid-cols-\[1\.85fr_1fr\] {
        grid-template-columns: 1.85fr 1fr;
    }

    .lg\:grid-cols-\[1\.8fr_1fr\] {
        grid-template-columns: 1.8fr 1fr;
    }

    .lg\:grid-cols-\[180px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .lg\:grid-cols-\[1fr_1\.05fr\] {
        grid-template-columns: 1fr 1.05fr;
    }

    .lg\:grid-cols-\[1fr_1\.08fr\] {
        grid-template-columns: 1fr 1.08fr;
    }

    .lg\:grid-cols-\[1fr_1\.1fr\] {
        grid-template-columns: 1fr 1.1fr;
    }

    .lg\:grid-cols-\[1fr_1\.25fr\] {
        grid-template-columns: 1fr 1.25fr;
    }

    .lg\:grid-cols-\[1fr_1fr\] {
        grid-template-columns: 1fr 1fr;
    }

    .lg\:grid-cols-\[1fr_1fr_\.8fr\] {
        grid-template-columns: 1fr 1fr .8fr;
    }

    .lg\:grid-cols-\[1fr_360px\] {
        grid-template-columns: 1fr 360px;
    }

    .lg\:grid-cols-\[1fr_auto\] {
        grid-template-columns: 1fr auto;
    }

    .lg\:grid-cols-\[210px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .lg\:grid-cols-\[232px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 232px minmax(0, 1fr);
    }

    .lg\:grid-cols-\[400px_1fr\] {
        grid-template-columns: 400px 1fr;
    }

    .lg\:grid-cols-\[420px_1fr\] {
        grid-template-columns: 420px 1fr;
    }

    .lg\:grid-cols-\[auto_1fr\] {
        grid-template-columns: auto 1fr;
    }

    .lg\:grid-cols-\[minmax\(0\2c 1fr\)_400px\] {
        grid-template-columns: minmax(0, 1fr) 400px;
    }

    .lg\:grid-cols-\[minmax\(0\2c 320px\)_1fr\] {
        grid-template-columns: minmax(0, 320px) 1fr;
    }

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:flex-wrap {
        flex-wrap: wrap;
    }

    .lg\:items-end {
        align-items: flex-end;
    }

    .lg\:justify-end {
        justify-content: flex-end;
    }

    .lg\:justify-between {
        justify-content: space-between;
    }

    .lg\:gap-0 {
        gap: 0px;
    }

    .lg\:gap-10 {
        gap: 2.5rem;
    }

    .lg\:gap-12 {
        gap: 3rem;
    }

    .lg\:gap-14 {
        gap: 3.5rem;
    }

    .lg\:gap-16 {
        gap: 4rem;
    }

    .lg\:gap-5 {
        gap: 1.25rem;
    }

    .lg\:gap-6 {
        gap: 1.5rem;
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:gap-x-10 {
        -moz-column-gap: 2.5rem;
        column-gap: 2.5rem;
    }

    .lg\:gap-x-5 {
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

    .lg\:gap-x-6 {
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
    }

    .lg\:gap-x-8 {
        -moz-column-gap: 2rem;
        column-gap: 2rem;
    }

    .lg\:gap-y-8 {
        row-gap: 2rem;
    }

    .lg\:justify-self-end {
        justify-self: end;
    }

    .lg\:rounded-2xl {
        border-radius: 1rem;
    }

    .lg\:rounded-3xl {
        border-radius: 1.5rem;
    }

    .lg\:rounded-4xl {
        border-radius: 2rem;
    }

    .lg\:rounded-5xl {
        border-radius: 2.5rem;
    }

    .lg\:rounded-\[28px\] {
        border-radius: 28px;
    }

    .lg\:rounded-\[calc\(2\.5rem-0\.5rem\)\] {
        border-radius: calc(2.5rem - 0.5rem);
    }

    .lg\:rounded-\[calc\(2rem-0\.5rem\)\] {
        border-radius: calc(2rem - 0.5rem);
    }

    .lg\:border-l {
        border-left-width: 1px;
    }

    .lg\:border-r {
        border-right-width: 1px;
    }

    .lg\:border-t-0 {
        border-top-width: 0px;
    }

    .lg\:border-\[\#E4E8EE\] {
        --tw-border-opacity: 1;
        border-color: rgb(228 232 238 / var(--tw-border-opacity, 1));
    }

    .lg\:border-\[\#E5E5DD\] {
        --tw-border-opacity: 1;
        border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
    }

    .lg\:p-10 {
        padding: 2.5rem;
    }

    .lg\:p-11 {
        padding: 2.75rem;
    }

    .lg\:p-12 {
        padding: 3rem;
    }

    .lg\:p-14 {
        padding: 3.5rem;
    }

    .lg\:p-4 {
        padding: 1rem;
    }

    .lg\:p-5 {
        padding: 1.25rem;
    }

    .lg\:p-6 {
        padding: 1.5rem;
    }

    .lg\:p-7 {
        padding: 1.75rem;
    }

    .lg\:p-8 {
        padding: 2rem;
    }

    .lg\:p-9 {
        padding: 2.25rem;
    }

    .lg\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .lg\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .lg\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .lg\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .lg\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .lg\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .lg\:py-28 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }

    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .lg\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .lg\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .lg\:py-7 {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .lg\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .lg\:py-9 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .lg\:pb-10 {
        padding-bottom: 2.5rem;
    }

    .lg\:pb-16 {
        padding-bottom: 4rem;
    }

    .lg\:pb-20 {
        padding-bottom: 5rem;
    }

    .lg\:pb-24 {
        padding-bottom: 6rem;
    }

    .lg\:pb-28 {
        padding-bottom: 7rem;
    }

    .lg\:pb-32 {
        padding-bottom: 8rem;
    }

    .lg\:pb-6 {
        padding-bottom: 1.5rem;
    }

    .lg\:pl-12 {
        padding-left: 3rem;
    }

    .lg\:pl-5 {
        padding-left: 1.25rem;
    }

    .lg\:pl-7 {
        padding-left: 1.75rem;
    }

    .lg\:pl-8 {
        padding-left: 2rem;
    }

    .lg\:pr-12 {
        padding-right: 3rem;
    }

    .lg\:pr-5 {
        padding-right: 1.25rem;
    }

    .lg\:pr-6 {
        padding-right: 1.5rem;
    }

    .lg\:pt-12 {
        padding-top: 3rem;
    }

    .lg\:pt-16 {
        padding-top: 4rem;
    }

    .lg\:pt-2 {
        padding-top: 0.5rem;
    }

    .lg\:pt-24 {
        padding-top: 6rem;
    }

    .lg\:pt-3 {
        padding-top: 0.75rem;
    }

    .lg\:pt-36 {
        padding-top: 9rem;
    }

    .lg\:pt-40 {
        padding-top: 10rem;
    }

    .lg\:pt-44 {
        padding-top: 11rem;
    }

    .lg\:pt-5 {
        padding-top: 1.25rem;
    }

    .lg\:pt-6 {
        padding-top: 1.5rem;
    }

    .lg\:pt-7 {
        padding-top: 1.75rem;
    }

    .lg\:pt-8 {
        padding-top: 2rem;
    }

    .lg\:text-right {
        text-align: right;
    }

    .lg\:text-\[15\.5px\] {
        font-size: 15.5px;
    }

    .lg\:text-\[15px\] {
        font-size: 15px;
    }

    .lg\:text-\[16\.5px\] {
        font-size: 16.5px;
    }

    .lg\:text-\[16px\] {
        font-size: 16px;
    }

    .lg\:text-\[17\.5px\] {
        font-size: 17.5px;
    }

    .lg\:text-\[17px\] {
        font-size: 17px;
    }

    .lg\:text-\[18px\] {
        font-size: 18px;
    }

    .lg\:text-\[19px\] {
        font-size: 19px;
    }

    .lg\:text-\[20px\] {
        font-size: 20px;
    }

    .lg\:text-\[22px\] {
        font-size: 22px;
    }

    .lg\:text-\[23px\] {
        font-size: 23px;
    }

    .lg\:text-\[24px\] {
        font-size: 24px;
    }

    .lg\:text-\[26px\] {
        font-size: 26px;
    }

    .lg\:text-\[28px\] {
        font-size: 28px;
    }

    .lg\:text-\[30px\] {
        font-size: 30px;
    }

    .lg\:text-\[34px\] {
        font-size: 34px;
    }

    .lg\:text-\[38px\] {
        font-size: 38px;
    }

    .lg\:text-\[40px\] {
        font-size: 40px;
    }

    .lg\:text-\[44px\] {
        font-size: 44px;
    }

    .lg\:text-\[48px\] {
        font-size: 48px;
    }
}

@media (min-width: 1280px) {
    .xl\:block {
        display: block;
    }

    .xl\:grid {
        display: grid;
    }

    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[196px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 196px minmax(0, 1fr);
    }

    .xl\:grid-cols-\[minmax\(0\2c 1fr\)_420px\] {
        grid-template-columns: minmax(0, 1fr) 420px;
    }

    .xl\:gap-14 {
        gap: 3.5rem;
    }

    .xl\:gap-x-16 {
        -moz-column-gap: 4rem;
        column-gap: 4rem;
    }

    .xl\:gap-x-20 {
        -moz-column-gap: 5rem;
        column-gap: 5rem;
    }

    .xl\:pr-6 {
        padding-right: 1.5rem;
    }
}

@media print {
    .print\:hidden {
        display: none;
    }
}

.\[\&_\.qc-alert\:last-child\]\:\!mb-0 .qc-alert:last-child {
    margin-bottom: 0px !important;
}

.\[\&_\.qc-drop\]\:\!mb-0 .qc-drop {
    margin-bottom: 0px !important;
}

.\[\&_\.qc-drop\]\:\!flex .qc-drop {
    display: flex !important;
}

.\[\&_\.qc-note\]\:\!m-0 .qc-note {
    margin: 0px !important;
}

.\[\&_\.qc-url\]\:\!mb-3 .qc-url {
    margin-bottom: 0.75rem !important;
}

.\[\&_strong\]\:font-semibold strong {
    font-weight: 600;
}

.\[\&_strong\]\:text-white strong {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}