/* ==========================================================================
   PATO — stylesheet (pure CSS)
   1. Fonts (Prompt, self-hosted)  2. Reset (Tailwind preflight)  3. Site styles
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
/* prompt-thai-400-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/prompt-thai-400-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
/* prompt-latin-ext-400-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/prompt-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* prompt-latin-400-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/prompt-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* prompt-thai-500-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/prompt-thai-500-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
/* prompt-latin-ext-500-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/prompt-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* prompt-latin-500-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/prompt-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* prompt-thai-600-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/prompt-thai-600-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
/* prompt-latin-ext-600-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/prompt-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* prompt-latin-600-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/prompt-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* prompt-thai-700-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/prompt-thai-700-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
/* prompt-latin-ext-700-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/prompt-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* prompt-latin-700-normal */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/prompt-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* 2. Reset (Tailwind CSS v4 preflight, MIT) ---------------------------------- */
/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  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 */
  tab-size: 4; /* 3 */
  font-family: 'Prompt', sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  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. Reset the default border style to a 1px solid border.
*/

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;
  -webkit-text-decoration: 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 */
}

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

:-moz-focusring:where(:not(iframe)) {
  outline: auto;
}

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

progress {
  vertical-align: baseline;
}

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

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: 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;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  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;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

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

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

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

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* 3. Site styles ------------------------------------------------------------ */
:root {
    font-family: 'Prompt', sans-serif;
    color: #5b3a1e;
    background: #fdf6ea;
    font-synthesis: none;
    --ink: #492910;
    --brown: #5b3a1e;
    --gold: #f7b733;
    --muted: #817365;
    --cream: #fdf6ea;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}
body {
    margin: 0;
}
button,
a {
    -webkit-tap-highlight-color: transparent;
}
button,
a,
input {
    font: inherit;
}
button {
    cursor: pointer;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    color: inherit;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid #895b0a;
    outline-offset: 5px;
}
button:disabled {
    cursor: default;
}
img {
    max-width: 100%;
    display: block;
}
svg {
    flex-shrink: 0;
}
h1,
h2,
h3,
h4,
p {
    margin: 0;
}
.container {
    width: min(1200px, calc(100% - 96px));
    margin-inline: auto;
}
.site-shell {
    overflow: clip;
    background:
        radial-gradient(ellipse 55% 24% at 90% 15%, #ffe8a05c, transparent 85%),
        radial-gradient(ellipse 30% 22% at 2% 42%, #fff0bd66, transparent), #fdf9f1;
}
.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 50;
    padding: 12px 24px;
    background: #fff;
    border: 2px solid var(--brown);
}
.skip-link:focus {
    top: 12px;
}
.site-header {
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    gap: 32px;
}
.brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.brand-word {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
    color: #4a260c;
    display: flex;
    align-items: baseline;
}
.brand-a {
    position: relative;
}
.brand-a svg {
    position: absolute;
    left: -1px;
    bottom: 1px;
    width: 31px;
    height: 20px;
    color: var(--gold);
}
.brand-dot {
    color: #e9a61a;
    letter-spacing: -1px;
}
.brand-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.55px;
    margin-top: 5px;
}
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-left: auto;
    margin-right: 35px;
}
.desktop-nav a,
.desktop-nav button {
    font-size: 13px;
    font-weight: 400;
    padding: 12px 0;
    position: relative;
    border: 0;
    background: none;
    white-space: nowrap;
}
.desktop-nav a::after,
.desktop-nav button::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #d99b1b;
    transition: width 0.2s;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after,
.desktop-nav button:hover::after {
    width: 20px;
}
.menu-toggle,
.mobile-nav {
    display: none;
}
.line-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 68px;
    padding: 10px 23px 10px 14px;
    background: linear-gradient(125deg, #ffce4b, #ffc225 65%, #f6b51e);
    border: 1px solid #ffda6c;
    border-radius: 20px;
    box-shadow:
        0 7px 0 #c78a0d12,
        0 10px 30px #e7b53120,
        inset 0 1px 0 #fff7;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    color: #3f280f;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.line-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px #c58a1833;
}
.line-button:active {
    transform: translateY(0);
}
.line-button > svg {
    width: 21px;
    margin-left: 5px;
}
.line-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #06b64b;
    color: #fff;
    box-shadow: 0 2px 5px #42932e20;
}
.line-mark svg {
    width: 37px;
    height: 37px;
}
.line-button.compact {
    min-height: 45px;
    background: #543217;
    color: #fff7e9;
    font-size: 13px;
    gap: 19px;
    border: 1px solid #543217;
    padding: 8px 21px;
    border-radius: 100px;
    box-shadow: none;
}
.line-button.compact > svg {
    width: 17px;
}
.hero {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    min-height: 655px;
    align-items: center;
    position: relative;
    padding-top: 15px;
    padding-bottom: 40px;
}
.hero-copy {
    position: relative;
    z-index: 3;
    padding-bottom: 5px;
}
.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 500;
    background: #fff0c2;
    border: 1px solid #f5dda1;
    border-radius: 100px;
    padding: 6px 14px 6px 7px;
    margin-bottom: 27px;
    color: #775116;
}
.eyebrow-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eeb738;
    color: #fff;
}
.eyebrow-icon svg {
    width: 15px;
    height: 15px;
}
.hero h1 {
    font-size: clamp(50px, 5.1vw, 75px);
    font-weight: 600;
    letter-spacing: -3px;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 21px;
}
.growth-word {
    color: #d99108;
    display: inline-block;
    position: relative;
}
.growth-word svg {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 17px;
    fill: none;
    stroke: #eaa418;
    stroke-width: 3;
    stroke-linecap: round;
}
.hero-description {
    font-size: 18px;
    line-height: 1.85;
    letter-spacing: -0.25px;
    color: #78634f;
    margin-bottom: 31px;
}
.trust-points {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 23px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #74614d;
}
.trust-points span,
.trust-points button {
    display: flex;
    align-items: center;
    gap: 5px;
}
.trust-points button {
    border: 0;
    background: none;
    padding: 0;
    font-size: 11px;
}
.trust-points svg {
    width: 14px;
    height: 14px;
    color: #b77d08;
    stroke-width: 2.4;
}
.explore-link {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    margin-top: 35px;
    color: #7c6955;
}
.explore-link span {
    border: 1px solid #e5d9c7;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    transition: transform 0.2s;
}
.explore-link svg {
    width: 12px;
    height: 12px;
}
.explore-link:hover span {
    transform: translateY(3px);
}
.hero-art {
    height: 600px;
    position: relative;
    margin-left: -24px;
    margin-right: -25px;
    align-self: end;
}
.hero-orbit {
    position: absolute;
    inset: 50px -15px 16px 15px;
    border-radius: 49% 48% 42% 55%;
    background: radial-gradient(ellipse at 50% 25%, #fff3c0 10%, #ffe8a5 70%, #ffdb7c);
    transform: rotate(-12deg);
    opacity: 0.8;
}
.orbit-ring {
    position: absolute;
    width: 580px;
    height: 450px;
    border: 1px solid #dfb65c30;
    border-radius: 50%;
    top: 100px;
    left: -20px;
    transform: rotate(-35deg);
}
.hero-mascot {
    position: absolute;
    width: 325px;
    height: auto;
    left: -5px;
    bottom: 9px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 18px 15px #8b591821);
}
.hero-phone-wrap {
    position: absolute;
    right: 21px;
    top: 91px;
    z-index: 2;
    transform: rotate(8deg);
    filter: drop-shadow(12px 16px 17px #62451d25);
}
.floating-topic {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    background: #fffdf7f5;
    border: 1px solid #fff;
    border-radius: 18px;
    padding: 11px 17px;
    z-index: 4;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px #a1741920;
    animation: float 6s ease-in-out infinite;
}
.floating-topic svg {
    color: #d59a0b;
    width: 23px;
    height: 23px;
}
.topic-idea {
    left: 28px;
    top: 54px;
    transform: rotate(-8deg);
}
.topic-register {
    right: 42px;
    top: 4px;
    transform: rotate(5deg);
    animation-delay: -2s;
}
.topic-funding {
    right: -12px;
    top: 236px;
    transform: rotate(6deg);
    animation-delay: -3s;
}
.topic-growth {
    left: -26px;
    top: 188px;
    transform: rotate(-7deg);
    animation-delay: -1s;
}
.leaf {
    position: absolute;
    z-index: 1;
    background: linear-gradient(135deg, #c0cb68, #78973d);
    border-radius: 0 85% 0 85%;
    width: 50px;
    height: 90px;
    box-shadow: inset 0 0 8px #fff3;
}
.leaf::after {
    content: '';
    position: absolute;
    inset: 12px 24px 4px;
    width: 1px;
    background: #5c7a3f60;
    transform: rotate(-28deg);
}
.leaf-one {
    right: -18px;
    top: 73px;
    transform: rotate(28deg);
}
.leaf-two {
    left: 15px;
    bottom: 60px;
    transform: rotate(-58deg);
    width: 40px;
    height: 67px;
}
.leaf-three {
    right: 18px;
    bottom: 4px;
    transform: rotate(68deg);
    background: linear-gradient(135deg, #ffe274, #e9ad26);
}
.mascot-note {
    position: absolute;
    bottom: 5px;
    left: 265px;
    z-index: 4;
    transform: rotate(-7deg);
    font-size: 12px;
    line-height: 1.8;
}
.mascot-note span {
    display: block;
    color: #897454;
}
.mascot-note b {
    font-weight: 500;
}
.mascot-note svg {
    position: absolute;
    right: -63px;
    top: 0;
    width: 55px;
    fill: none;
    stroke: #b27b24;
    stroke-width: 1.6;
    stroke-linecap: round;
}
.hero-demo-label {
    position: absolute;
    right: 58px;
    bottom: 51px;
    font-size: 9px;
    color: #71604c;
    z-index: 3;
    transform: rotate(8deg);
}
.benefits-section {
    position: relative;
    z-index: 4;
    padding-top: 14px;
    scroll-margin-top: 20px;
}
.benefits-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 32px 13px 29px;
    background: #fffdf8;
    border: 1px solid #fff;
    border-radius: 28px;
    box-shadow: 0 16px 46px #a27d2310;
}
.benefit {
    text-align: center;
    position: relative;
    padding: 0 15px;
}
.benefit + .benefit {
    border-left: 1px solid #eee4d4;
}
.benefit-number {
    position: absolute;
    right: 19px;
    top: 2px;
    font-size: 10px;
    color: #827059;
    letter-spacing: 1px;
}
.benefit-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #fff0be, #ffdf86);
    border: 1px solid #ffdda1;
    border-radius: 20px;
    margin: 0 auto 17px;
    transform: rotate(-5deg);
}
.benefit-icon svg {
    width: 28px;
    height: 28px;
    transform: rotate(5deg);
    color: #71451d;
}
.benefit h3 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.3px;
    margin-bottom: 9px;
    color: #4f311b;
}
.benefit p {
    font-size: 12px;
    line-height: 1.9;
    white-space: pre-line;
    color: #7c6a55;
}
.benefits-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #7b6853;
    font-size: 10px;
    letter-spacing: 0.15px;
    margin: 22px 0 0;
}
.tiny-line {
    width: 30px;
    height: 1px;
    background: #d2b67c;
}
.steps-section {
    padding-top: 85px;
    padding-bottom: 45px;
    position: relative;
}
.section-heading {
    text-align: center;
    margin-bottom: 49px;
}
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #886226;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.8px;
}
.section-kicker > span {
    width: 16px;
    height: 1px;
    background: #d2a952;
}
.section-heading h2 {
    color: var(--ink);
    font-size: 39px;
    font-weight: 600;
    letter-spacing: -1.4px;
    line-height: 1.6;
    margin: 9px 0;
}
.section-heading h2 > span {
    color: #ce8b0c;
}
.section-heading > p {
    font-size: 15px;
    color: #7c6955;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 52px;
    max-width: 1040px;
    margin: auto;
    position: relative;
}
.steps-grid::before {
    content: '';
    position: absolute;
    left: 50px;
    right: 70px;
    top: 22px;
    border-top: 1px dashed #dac8a5;
}
.step {
    position: relative;
    min-width: 0;
}
.step-heading {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    position: relative;
    margin-bottom: 28px;
    min-height: 94px;
}
.step-number {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f5bd3e;
    box-shadow: 0 0 0 9px #fdf9f1;
    font-size: 19px;
    font-weight: 500;
    flex-shrink: 0;
    position: relative;
    color: #624115;
}
.step-heading > div {
    padding: 5px 0;
    background: #fdf9f1;
}
.step h3 {
    font-size: 19px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin-bottom: 7px;
    color: #54351e;
}
.step-heading p {
    font-size: 12px;
    line-height: 1.85;
    white-space: pre-line;
    color: #7c6955;
}
.step-phone-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0 10px;
}
.step-phone-wrap::before {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    top: 45%;
    bottom: -20px;
    border-radius: 48% 48% 30% 30%;
    background: radial-gradient(ellipse, #f4dfa87d, transparent 70%);
    z-index: 0;
}
.step-2 .step-phone-wrap {
    transform: translateY(17px);
}
.demo-note {
    margin: 45px auto 0;
    text-align: center;
    font-size: 10px;
    color: #87725b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    line-height: 1.8;
}
.demo-note svg {
    width: 13px;
    height: 13px;
}
.demo-note > span {
    color: #867866;
    padding-left: 10px;
    border-left: 1px solid #d6cbb9;
}
/* Live, editable device UI. Every visible string remains real HTML. */
.phone {
    width: 278px;
    height: 490px;
    border: 5px solid #302920;
    outline: 1px solid #a29379;
    border-radius: 37px;
    padding: 3px;
    background: linear-gradient(110deg, #ddbb76, #574c3b 20%, #252524 80%, #c2a16a);
    box-shadow:
        8px 14px 32px #71552f1c,
        inset 1px 0 1px #fff9;
    position: relative;
    flex-shrink: 0;
    color: #44382b;
    text-align: left;
    font-size: 11px;
    isolation: isolate;
}
.phone::before,
.phone::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 90px;
    width: 3px;
    height: 39px;
    border-radius: 3px;
    background: #b79d6b;
}
.phone::after {
    top: 143px;
    height: 27px;
}
.phone-screen {
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    background: #fffcf6;
    position: relative;
    display: flex;
    flex-direction: column;
}
.phone-chat .phone-screen {
    background: linear-gradient(155deg, #d5e1ee, #edf1f4);
}
.phone-status {
    height: 31px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-size: 9px;
    font-weight: 600;
    position: relative;
    color: #2f322f;
}
.phone-status > div {
    display: flex;
    gap: 3px;
    align-items: center;
}
.phone-status svg {
    width: 10px;
    height: 10px;
}
.phone-status svg:last-child {
    width: 15px;
}
.dynamic-island {
    position: absolute;
    width: 65px;
    height: 17px;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px;
    background: #292726;
}
.phone-topbar {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid #6a6b6a0c;
    padding: 3px 13px 9px;
    font-size: 11px;
}
.phone-topbar strong {
    font-weight: 500;
}
.phone-topbar > svg {
    width: 19px;
    height: 19px;
    padding: 3px;
    background: #fff;
    border: 1px solid #efe8da;
    border-radius: 50%;
}
.phone-topbar .online-dot {
    width: 5px;
    height: 5px;
    background: #6d9452;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 8px;
}
.avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff2c3;
    display: block;
    border: 2px solid #fff8;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: scale(1.4);
    transform-origin: 50% 22%;
}
.avatar.small {
    width: 25px;
    height: 25px;
}
.chat-content {
    padding: 9px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-date {
    text-align: center;
    font-size: 8px;
    color: #69798b;
}
.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.chat-bubble {
    background: #fff;
    border-radius: 3px 13px 13px 13px;
    padding: 12px 13px;
    font-size: 11px;
    line-height: 1.8;
    box-shadow: 0 2px 6px #46658105;
    flex: 1;
}
.chat-bubble b {
    font-weight: 500;
}
.chat-question {
    font-size: 10px;
    margin-left: 6px;
    color: #455363;
}
.chat-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.chat-options button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #fff;
    background: #ffffffdf;
    text-align: left;
    position: relative;
    transition:
        border-color 0.2s,
        background 0.2s;
    line-height: 1.6;
    font-size: 9px;
}
.chat-options button:hover {
    background: #fffbec;
    border-color: #e9bd59;
}
.chat-options button.selected {
    border-color: #d9a32e;
    background: #fff7dd;
}
.chat-options svg {
    width: 19px;
    height: 19px;
    color: #cc9015;
}
.chat-options .option-check {
    width: 12px;
    height: 12px;
    margin-left: auto;
    color: #80641e;
}
.radio-dot {
    width: 13px;
    height: 13px;
    border: 1.5px solid #bfbfb7;
    border-radius: 50%;
    flex-shrink: 0;
}
.selected .radio-dot {
    border: 4px solid #d7a02d;
    background: #fff6d9;
}
.chat-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 8px;
    color: #6b7a87;
    margin-top: 4px;
}
.chat-hint svg {
    width: 10px;
    height: 10px;
}
.chat-reply {
    background: #f8f3df;
    border-radius: 10px 10px 10px 2px;
    padding: 8px 11px;
    font-size: 9px;
    line-height: 1.6;
    margin-left: 32px;
    animation: appear 0.2s ease-out;
}
.phone-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 16px;
    color: #766958;
    font-size: 8px;
    gap: 8px;
}
.phone-chat .phone-bottom {
    border-top: 1px solid #fff8;
    background: #eef2f6;
    padding: 8px 11px 17px;
}
.phone-chat .phone-bottom > span {
    background: #fff9;
    border-radius: 100px;
    padding: 8px 10px;
    flex: 1;
    color: #616e7b;
    font-size: 8px;
}
.phone-bottom svg {
    width: 21px;
    height: 21px;
    background: #c7d9e8;
    padding: 4px;
    border-radius: 50%;
    color: #4f6578;
}
.home-indicator {
    position: absolute;
    width: 75px;
    height: 3px;
    background: #2f2b29;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}
.phone-hero {
    width: 260px;
    height: 453px;
    border-radius: 36px;
}
.phone-hero .chat-content {
    gap: 9px;
    padding: 7px 11px 0;
}
.phone-hero .chat-bubble {
    font-size: 10px;
    padding: 9px 11px;
}
.phone-hero .chat-options button {
    min-height: 37px;
    padding: 6px 9px;
    font-size: 8.5px;
}
.phone-hero .chat-options {
    gap: 6px;
}
.phone-hero .chat-hint {
    display: none;
}
.phone-hero .chat-reply {
    font-size: 8px;
    padding: 5px 8px;
}
.analysis-content,
.roadmap-content {
    padding: 14px 13px 5px;
}
.screen-eyebrow {
    display: block;
    font-size: 9px;
    color: #7c6850;
    margin-bottom: 12px;
}
.stage-summary {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #efe4cf;
    background: #fffdf7;
    border-radius: 15px;
    padding: 13px 10px;
    margin-bottom: 14px;
}
.stage-badge {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, #ffe9a5, #f7c34d);
    font-size: 24px;
    font-weight: 500;
    color: #503616;
    flex-shrink: 0;
}
.stage-summary > div {
    flex: 1;
    min-width: 0;
}
.stage-summary b {
    font-size: 11px;
    font-weight: 500;
    display: block;
}
.stage-summary > div > span {
    font-size: 8px;
    color: #79664c;
    display: block;
    margin-top: 4px;
}
.progress-track {
    height: 5px;
    background: #eae4d9;
    border-radius: 8px;
    margin-top: 9px;
    overflow: hidden;
}
.progress-track > span {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: #efb94d;
    transition: width 0.4s ease;
}
.analysis-box {
    padding: 13px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.analysis-box h4 {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 8px;
}
.strengths {
    background: #f2f5e9;
}
.strengths p {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    line-height: 1.5;
    margin-top: 7px;
    color: #596346;
}
.check-circle {
    width: 13px;
    height: 13px;
    background: #839c55;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.check-circle svg {
    width: 9px;
    height: 9px;
    color: white;
    stroke-width: 3;
}
.next-focus {
    display: flex;
    gap: 8px;
    background: #fff0dc;
    color: #9a5a20;
}
.next-focus > svg {
    width: 17px;
    height: 17px;
    margin-top: 1px;
}
.next-focus h4 {
    font-size: 10px;
    margin-bottom: 4px;
}
.next-focus p {
    font-size: 9px;
    line-height: 1.75;
}
.analysis-note {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 9px;
    line-height: 1.7;
    color: #87764e;
    padding: 5px 10px;
}
.analysis-note svg {
    width: 22px;
    height: 22px;
    color: #809858;
}
.analysis-note b {
    font-weight: 400;
}
.roadmap-content > h4 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 13px;
}
.roadmap-tabs {
    display: flex;
    background: #f1ebe1;
    padding: 4px;
    border-radius: 11px;
    margin-bottom: 14px;
}
.roadmap-tabs button {
    flex: 1;
    border: 0;
    border-radius: 8px;
    font-size: 9px;
    min-height: 32px;
    background: transparent;
    color: #80705f;
    transition: background 0.2s;
}
.roadmap-tabs button[aria-pressed='true'] {
    background: #5b3a1e;
    color: #fff6e7;
    box-shadow: 0 2px 4px #5b3a1e18;
}
.roadmap-period {
    font-size: 9px;
    color: #907b5e;
    margin-bottom: 8px;
}
.task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.roadmap-task {
    background: #fffefa;
    border: 1px solid #f0e7d8;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 2px 5px #8a602306;
}
.roadmap-task > button {
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 12px 9px;
    width: 100%;
    min-height: 62px;
}
.task-icon {
    color: #d9940c;
    background: #fff4d9;
    border-radius: 8px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 32px;
    flex-shrink: 0;
}
.task-icon svg {
    width: 18px;
    height: 18px;
}
.roadmap-task b {
    font-weight: 500;
    font-size: 9px;
    display: block;
}
.roadmap-task small {
    font-size: 8px;
    color: #7d6b55;
    display: block;
    margin-top: 4px;
}
.roadmap-task button > svg {
    width: 12px;
    height: 12px;
    margin-left: auto;
    color: #9f896e;
}
.roadmap-task > p {
    padding: 0 11px 10px;
    font-size: 9px;
    line-height: 1.8;
    color: #8c795f;
    animation: appear 0.2s;
}
.funding-note {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 10px;
    background: #f3f4e8;
    margin-top: 12px;
    padding: 10px;
    color: #6c7c45;
    font-size: 9px;
}
.funding-note svg {
    width: 23px;
    height: 23px;
}
.funding-note small {
    font-size: 7px;
    color: #778160;
}
.roadmap-content {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #dac8a5 transparent;
    flex: 1;
}
.phone-roadmap .phone-bottom {
    padding-top: 7px;
    padding-bottom: 15px;
    font-size: 7px;
}
.final-section {
    position: relative;
    background: #fdf6ea url(../images/cta-background.webp) center bottom 76px / 100% auto no-repeat;
    padding-top: 43px;
}
.final-content {
    text-align: center;
    position: relative;
    padding-bottom: 163px;
    z-index: 1;
}
.final-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #827749;
}
.final-kicker svg {
    width: 18px;
    height: 18px;
    color: #889a58;
}
.final-content h2 {
    font-size: 38px;
    line-height: 1.6;
    letter-spacing: -1.2px;
    font-weight: 600;
    color: #4c2c14;
    margin: 9px 0 3px;
}
.final-content h2 > span {
    color: #d18d0b;
}
.final-content > p {
    font-size: 16px;
    font-weight: 400;
    color: #786146;
    margin-bottom: 22px;
}
.final-content .line-button {
    min-width: 280px;
}
.final-note {
    display: block;
    margin-top: 17px;
    font-size: 10px;
    color: #806f56;
}
.site-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e9e1cf;
    background: #fcf8eefa;
    backdrop-filter: blur(15px);
}
.footer-inner {
    min-height: 93px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.site-footer .brand-word {
    font-size: 29px;
    letter-spacing: -2px;
}
.site-footer .brand-a svg {
    width: 22px;
    height: 13px;
    bottom: 0;
}
.site-footer .brand-tagline {
    font-size: 7px;
    letter-spacing: 0.3px;
    margin-top: 3px;
}
.footer-inner > p {
    font-size: 10px;
    color: #806b52;
}
.footer-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 10px;
    color: #8a765e;
}
.footer-links a,
.footer-links button {
    background: none;
    border: 0;
    padding: 12px 0;
    font-size: 10px;
}
.footer-links a:hover,
.footer-links button:hover {
    text-decoration: underline;
}
.footer-links > span {
    color: #7f6b51;
    font-size: 9px;
}
.info-dialog {
    max-width: 580px;
    width: calc(100% - 32px);
    max-height: 85dvh;
    margin: auto;
    padding: 0;
    background: #fffcf6;
    color: var(--brown);
    border: 1px solid #eee0c9;
    border-radius: 26px;
    box-shadow: 0 30px 100px #39240d40;
    overscroll-behavior: contain;
}
.info-dialog::backdrop {
    background: #3d2c1b66;
    backdrop-filter: blur(7px);
}
.dialog-body {
    padding: 40px;
    position: relative;
}
.dialog-panel {
    display: contents;
}
.dialog-close {
    position: absolute;
    right: 15px;
    top: 15px;
    border: 0;
    border-radius: 50%;
    background: #f3ebdc;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
}
.dialog-close svg {
    width: 17px;
    height: 17px;
}
.dialog-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #ffedba;
    margin-bottom: 22px;
}
.dialog-icon svg {
    width: 27px;
    height: 27px;
}
.dialog-body h2 {
    font-size: 27px;
    font-weight: 500;
    line-height: 1.6;
    margin: 8px 0 19px;
    letter-spacing: -0.6px;
}
.dialog-body > p,
.dialog-panel > p {
    font-size: 13px;
    line-height: 1.9;
    color: #83705a;
    margin-bottom: 17px;
}
.dialog-action {
    border: 1px solid #f0bb44;
    background: #f7c551;
    border-radius: 13px;
    padding: 13px 20px;
    display: inline-flex;
    gap: 20px;
    align-items: center;
    font-size: 13px;
    margin-top: 5px;
}
.dialog-action svg {
    width: 18px;
    height: 18px;
}
.faq-item {
    border-bottom: 1px solid #eadfcc;
    padding: 17px 0;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 13px;
    line-height: 1.8;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary svg {
    width: 17px;
    height: 17px;
    transition: transform 0.2s;
}
.faq-item[open] summary svg {
    transform: rotate(180deg);
}
.faq-item p {
    font-size: 12px;
    line-height: 1.9;
    color: #8c785f;
    margin-top: 12px;
}
.will-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}
.will-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.step-2.will-reveal {
    transition-delay: 0.08s;
}
.step-3.will-reveal {
    transition-delay: 0.16s;
}
@keyframes float {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -7px;
    }
}
@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 1440px) {
    .hero h1 {
        font-size: 76px;
    }
    .hero-art {
        margin-right: -15px;
    }
    .hero-phone-wrap {
        right: 31px;
    }
    .hero-mascot {
        width: 347px;
        left: 0;
        bottom: 1px;
    }
}
@media (max-width: 1199px) {
    .container {
        width: calc(100% - 64px);
    }
    .desktop-nav {
        gap: 22px;
        margin-right: 12px;
    }
    .hero {
        grid-template-columns: 1fr 1fr;
        min-height: 620px;
    }
    .hero-art {
        height: 570px;
        transform: scale(0.88);
        transform-origin: 80% 60%;
        margin-left: -40px;
        margin-right: -35px;
    }
    .hero h1 {
        font-size: 58px;
    }
    .hero-description {
        font-size: 16px;
    }
    .trust-points {
        gap: 13px;
        font-size: 10px;
    }
    .trust-points button {
        font-size: 10px;
    }
    .hero-phone-wrap {
        right: 0;
    }
    .hero-mascot {
        left: -29px;
        width: 303px;
    }
    .topic-funding {
        right: -24px;
    }
    .topic-idea {
        left: -7px;
    }
    .topic-growth {
        left: -50px;
    }
    .steps-grid {
        gap: 24px;
    }
    .step-heading {
        gap: 10px;
    }
    .step h3 {
        font-size: 17px;
    }
    .step-heading p {
        font-size: 11px;
    }
    .phone {
        width: 266px;
    }
    .phone-hero {
        width: 253px;
    }
    .benefit h3 {
        font-size: 14px;
    }
    .benefit p {
        font-size: 11px;
    }
    .final-content {
        padding-bottom: 150px;
    }
}
@media (max-width: 959px) {
    .container {
        width: calc(100% - 48px);
    }
    .site-header {
        height: 98px;
        gap: 20px;
    }
    .desktop-nav {
        gap: 17px;
        margin: 0;
    }
    .desktop-nav a,
    .desktop-nav button {
        font-size: 11px;
    }
    .header-cta.compact {
        font-size: 11px;
        padding: 8px 15px;
        gap: 8px;
    }
    .brand-word {
        font-size: 37px;
    }
    .brand-tagline {
        font-size: 9px;
    }
    .hero {
        min-height: 570px;
        padding-top: 0;
        padding-bottom: 20px;
        grid-template-columns: 1fr 1fr;
    }
    .hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }
    .hero-description {
        font-size: 14px;
        line-height: 1.9;
    }
    .hero-copy > .line-button {
        font-size: 16px;
        gap: 10px;
        min-height: 61px;
        padding: 8px 17px 8px 10px;
    }
    .hero-copy .line-mark {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }
    .trust-points {
        gap: 10px;
        font-size: 9px;
        max-width: 300px;
        line-height: 2;
    }
    .trust-points button {
        font-size: 9px;
    }
    .hero-art {
        transform: scale(0.76);
        width: 505px;
        height: 590px;
        margin-left: -94px;
        margin-right: -65px;
        transform-origin: 50% 50%;
        align-self: center;
    }
    .hero-mascot {
        width: 300px;
        left: -10px;
    }
    .hero-phone-wrap {
        right: 0;
    }
    .topic-idea {
        left: 5px;
    }
    .topic-growth {
        left: -20px;
    }
    .hero-demo-label {
        right: 40px;
    }
    .mascot-note {
        left: 245px;
    }
    .eyebrow-pill {
        font-size: 10px;
        margin-bottom: 23px;
    }
    .benefits-section {
        padding-top: 0;
    }
    .benefits-panel {
        padding: 26px 8px;
    }
    .benefit {
        padding: 0 8px;
    }
    .benefit h3 {
        font-size: 12px;
    }
    .benefit p {
        font-size: 10px;
    }
    .benefit-icon {
        width: 49px;
        height: 49px;
        border-radius: 17px;
    }
    .benefit-number {
        right: 10px;
        font-size: 8px;
    }
    .steps-section {
        padding-top: 65px;
    }
    .section-heading h2 {
        font-size: 34px;
    }
    .section-heading > p {
        font-size: 13px;
    }
    .steps-grid {
        gap: 16px;
    }
    .step-heading {
        display: block;
        min-height: 133px;
        margin-bottom: 15px;
    }
    .step-heading > div {
        padding-top: 15px;
    }
    .step h3 {
        font-size: 16px;
    }
    .step-heading p {
        font-size: 10px;
    }
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 17px;
    }
    .steps-grid::before {
        top: 18px;
    }
    .step-phone-wrap {
        padding: 0;
        justify-content: flex-start;
        height: 400px;
    }
    .step-phone-wrap .phone {
        transform: scale(0.8);
        transform-origin: 0 0;
        width: 272px;
    }
    .step-2 .step-phone-wrap {
        transform: translateY(13px);
    }
    .demo-note {
        margin-top: 33px;
        font-size: 9px;
    }
    .final-section {
        background-size: auto 345px;
    }
    .final-content h2 {
        font-size: 34px;
    }
    .footer-inner {
        gap: 20px;
    }
    .footer-inner > p {
        font-size: 9px;
    }
    .footer-links {
        gap: 16px;
        font-size: 9px;
    }
    .footer-links button {
        font-size: 9px;
    }
}
@media (max-width: 699px) {
    html {
        scroll-padding-top: 15px;
    }
    .container {
        width: calc(100% - 40px);
    }
    .site-shell {
        background:
            radial-gradient(ellipse 90% 15% at 85% 16%, #ffebad7d, transparent 80%), #fdf9f1;
    }
    .site-header {
        height: 87px;
        gap: 12px;
    }
    .brand-word {
        font-size: 37px;
    }
    .brand-tagline {
        font-size: 9px;
    }
    .desktop-nav {
        display: none;
    }
    .header-cta.compact {
        margin-left: auto;
        font-size: 11px;
        min-height: 39px;
        gap: 10px;
        padding: 7px 14px;
    }
    .header-cta > svg {
        width: 14px;
    }
    .menu-toggle {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        background: none;
        border: 1px solid #e4d6c1;
        border-radius: 50%;
    }
    .menu-toggle svg {
        width: 18px;
        height: 18px;
    }
    .mobile-nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        padding: 14px 20px 20px;
        gap: 4px;
        background: #fffdf7;
        border: 1px solid #eddfca;
        border-radius: 20px;
        box-shadow: 0 20px 40px #6140141a;
    }
    .mobile-nav > a,
    .mobile-nav > button:not(.line-button) {
        padding: 13px 0;
        text-align: left;
        background: none;
        border: 0;
        border-bottom: 1px solid #f4ecdf;
        font-size: 13px;
    }
    .mobile-nav .line-button {
        font-size: 15px;
        min-height: 53px;
        margin-top: 10px;
    }
    .mobile-nav .line-mark {
        width: 33px;
        height: 33px;
    }
    .hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: 24px;
        padding-bottom: 20px;
    }
    .hero-copy {
        width: 100%;
        padding: 0;
        text-align: center;
    }
    .eyebrow-pill {
        margin-bottom: 20px;
        font-size: 10px;
        padding: 5px 13px 5px 6px;
    }
    .eyebrow-icon {
        width: 23px;
        height: 23px;
    }
    .hero h1 {
        font-size: 50px;
        line-height: 1.35;
        letter-spacing: -2px;
        margin-bottom: 19px;
    }
    .growth-word svg {
        height: 13px;
        bottom: -2px;
    }
    .hero-description {
        font-size: 13px;
        line-height: 1.9;
        margin-bottom: 24px;
    }
    .hero-copy > .line-button {
        font-size: 17px;
        min-height: 62px;
        gap: 13px;
        padding: 9px 20px 9px 11px;
    }
    .hero-copy .line-mark {
        width: 39px;
        height: 39px;
    }
    .trust-points {
        justify-content: center;
        gap: 12px;
        max-width: none;
        margin-top: 19px;
        font-size: 9px;
    }
    .trust-points button {
        font-size: 9px;
    }
    .trust-points svg {
        width: 12px;
        height: 12px;
    }
    .explore-link {
        display: none;
    }
    .hero-art {
        width: 365px;
        height: 440px;
        transform: none;
        margin: 28px -15px -4px;
        align-self: center;
    }
    .hero-orbit {
        inset: 55px -8px 10px 5px;
    }
    .orbit-ring {
        width: 355px;
        height: 290px;
        left: -5px;
        top: 79px;
    }
    .hero-phone-wrap {
        top: 64px;
        right: 19px;
        transform: rotate(8deg) scale(0.7);
        transform-origin: top right;
    }
    .hero-mascot {
        width: 224px;
        left: -3px;
        bottom: 1px;
    }
    .floating-topic {
        font-size: 9px;
        padding: 8px 10px;
        gap: 6px;
        border-radius: 13px;
    }
    .floating-topic svg {
        width: 18px;
        height: 18px;
    }
    .topic-register {
        right: 20px;
        top: 5px;
    }
    .topic-idea {
        left: 12px;
        top: 32px;
    }
    .topic-funding {
        right: -3px;
        top: 170px;
    }
    .topic-growth {
        left: 0;
        top: 117px;
    }
    .leaf-one {
        width: 30px;
        height: 54px;
        right: 0;
        top: 45px;
    }
    .leaf-two {
        width: 28px;
        height: 43px;
        left: 0;
        bottom: 45px;
    }
    .leaf-three {
        right: 20px;
        bottom: 22px;
        width: 35px;
        height: 65px;
    }
    .mascot-note {
        left: 200px;
        bottom: 7px;
        font-size: 9px;
    }
    .mascot-note svg {
        width: 36px;
        right: -40px;
        top: 5px;
    }
    .hero-demo-label {
        right: 30px;
        bottom: 59px;
        font-size: 7px;
    }
    .benefits-section {
        padding-top: 7px;
    }
    .benefits-panel {
        grid-template-columns: repeat(2, 1fr);
        padding: 9px 12px;
        border-radius: 24px;
        box-shadow: 0 14px 35px #a27d2310;
    }
    .benefit {
        padding: 22px 6px 23px;
    }
    .benefit:nth-child(3) {
        border-left: 0;
    }
    .benefit:nth-child(n + 3) {
        border-top: 1px solid #eee4d4;
    }
    .benefit-number {
        top: 16px;
        right: 9px;
    }
    .benefit-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 13px;
        border-radius: 16px;
    }
    .benefit-icon svg {
        width: 25px;
        height: 25px;
    }
    .benefit h3 {
        font-size: 11px;
        font-weight: 500;
        margin-bottom: 7px;
        letter-spacing: -0.35px;
    }
    .benefit p {
        font-size: 9px;
        line-height: 1.9;
    }
    .benefits-note {
        font-size: 8px;
        margin-top: 18px;
        gap: 8px;
    }
    .tiny-line {
        width: 20px;
    }
    .steps-section {
        padding-top: 55px;
        padding-bottom: 28px;
    }
    .section-heading {
        margin-bottom: 33px;
    }
    .section-kicker {
        font-size: 9px;
        letter-spacing: 0.5px;
    }
    .section-heading h2 {
        font-size: 29px;
        letter-spacing: -1.1px;
        line-height: 1.6;
        margin-top: 8px;
        margin-bottom: 7px;
        white-space: nowrap;
    }
    .section-heading > p {
        font-size: 11px;
        line-height: 1.8;
    }
    .steps-grid {
        display: flex;
        flex-direction: column;
        gap: 37px;
        max-width: 330px;
    }
    .steps-grid::before {
        display: none;
    }
    .step-heading {
        display: flex;
        gap: 13px;
        min-height: 0;
        margin-bottom: 22px;
        padding-left: 12px;
    }
    .step-heading > div {
        padding: 0;
        background: none;
    }
    .step-number {
        width: 38px;
        height: 38px;
        font-size: 19px;
        box-shadow: none;
    }
    .step h3 {
        font-size: 19px;
        line-height: 1.5;
        margin-bottom: 5px;
    }
    .step-heading p {
        font-size: 11px;
        line-height: 1.8;
    }
    .step-phone-wrap {
        height: auto;
        justify-content: center;
        padding: 0;
    }
    .step-phone-wrap .phone {
        transform: none;
        width: 278px;
        height: 485px;
    }
    .step-2 .step-phone-wrap {
        transform: none;
    }
    .step-phone-wrap::before {
        top: 30%;
        bottom: -15px;
        left: 0;
        right: 0;
    }
    .demo-note {
        margin-top: 30px;
        font-size: 9px;
        gap: 5px;
        line-height: 1.8;
    }
    .demo-note > span {
        border: 0;
        padding: 0;
        flex-basis: 100%;
        font-size: 8px;
    }
    .demo-note svg {
        width: 12px;
    }
    .final-section {
        padding-top: 38px;
        background-size: auto 350px;
        background-position: center bottom 165px;
    }
    .final-content {
        padding-bottom: 155px;
    }
    .final-kicker {
        font-size: 9px;
    }
    .final-content h2 {
        font-size: 29px;
        letter-spacing: -1px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .final-content > p {
        font-size: 13px;
        margin-bottom: 22px;
    }
    .final-content .line-button {
        min-width: 264px;
        min-height: 61px;
        font-size: 17px;
        gap: 14px;
    }
    .final-content .line-mark {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }
    .final-note {
        font-size: 9px;
        margin-top: 16px;
    }
    .footer-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 14px;
        padding: 24px 0;
        min-height: 145px;
    }
    .site-footer .brand-word {
        font-size: 31px;
    }
    .site-footer .brand-tagline {
        font-size: 7px;
    }
    .footer-inner > p {
        font-size: 9px;
    }
    .footer-links {
        flex-basis: 100%;
        justify-content: space-between;
        border-top: 1px solid #e7decb;
        padding-top: 10px;
        margin-left: 0;
        gap: 12px;
    }
    .footer-links button {
        font-size: 9px;
        padding: 8px 0;
    }
    .footer-links > span {
        font-size: 8px;
    }
    .dialog-body {
        padding: 36px 25px 28px;
    }
    .dialog-body h2 {
        font-size: 23px;
    }
    .dialog-body > p,
    .dialog-panel > p {
        font-size: 12px;
    }
    .faq-item summary {
        font-size: 12px;
    }
    .faq-item p {
        font-size: 11px;
    }
}
@media (max-width: 374px) {
    .container {
        width: calc(100% - 32px);
    }
    .header-cta.compact {
        font-size: 10px;
        padding-inline: 11px;
    }
    .hero h1 {
        font-size: 45px;
    }
    .hero-art {
        transform: scale(0.9);
        transform-origin: top center;
        margin-bottom: -40px;
    }
    .trust-points {
        gap: 8px;
        font-size: 8px;
    }
    .trust-points button {
        font-size: 8px;
    }
    .section-heading h2 {
        font-size: 26px;
    }
    .benefit h3 {
        font-size: 10px;
    }
    .benefit p {
        font-size: 8px;
    }
    .hero-description {
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
    .will-reveal {
        opacity: 1;
        transform: none;
    }
}

/* Keep small supporting copy readable against warm backgrounds. */
.explore-link,
.section-heading > p,
.benefits-note,
.step-heading p,
.benefit p,
.demo-note,
.demo-note > span,
.footer-links,
.footer-links > span {
    color: #79664f;
}
.hero-demo-label {
    bottom: 24px;
    right: 32px;
    transform: none;
    background: #fff6dfd9;
    border-radius: 6px;
    padding: 3px 6px;
    color: #6d573d;
}
@media (max-width: 699px) {
    .hero-demo-label {
        bottom: 45px;
        right: 21px;
        font-size: 7px;
    }
}

.analysis-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #dac8a5 transparent;
}
.phone-bottom {
    flex-shrink: 0;
}

/* Recommended funding and proposal preview in the third step. */
.step {
    display: flex;
    flex-direction: column;
}
.step-heading {
    flex: 1;
}
.step h3 {
    white-space: pre-line;
}
.step-phone-wrap {
    flex-shrink: 0;
}
.funding-content {
    padding: 12px 13px 5px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #dac8a5 transparent;
}
.funding-content > h4 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 13px;
}
.funding-content .roadmap-tabs {
    flex-shrink: 0;
}
.funding-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    margin-bottom: 9px;
}
.funding-intro > span {
    font-size: 8px;
    color: #78654d;
    border: 1px solid #eadfc8;
    border-radius: 5px;
    padding: 2px 5px;
}
.funding-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.funding-options button {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border: 1px solid #eee3cf;
    border-radius: 11px;
    background: #fffefa;
    padding: 10px 8px;
}
.funding-options button[aria-pressed='true'] {
    background: #fff7e1;
    border-color: #d5a749;
}
.funding-options b {
    display: block;
    font-size: 9px;
    font-weight: 500;
}
.funding-options small {
    display: block;
    font-size: 8px;
    line-height: 1.7;
    color: #78664e;
    margin-top: 4px;
}
.funding-options button > svg {
    width: 12px;
    height: 12px;
    color: #806422;
    margin-left: auto;
}
.proposal-teaser {
    margin-top: 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #f0f3e8;
    color: #596943;
    border-radius: 10px;
    padding: 11px;
}
.proposal-teaser > svg {
    width: 21px;
    height: 21px;
}
.proposal-teaser b {
    font-size: 10px;
    font-weight: 500;
}
.proposal-teaser p {
    font-size: 9px;
    line-height: 1.8;
    margin-top: 4px;
}
.proposal-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #f7c551;
    color: #503617;
    border: 1px solid #edb33b;
    border-radius: 9px;
    padding: 10px 5px;
    margin-top: 10px;
    font-size: 9px;
    font-weight: 500;
    min-height: 35px;
}
.proposal-action svg {
    width: 13px;
    height: 13px;
}
.funding-caveat {
    font-size: 7px;
    color: #78654d;
    text-align: center;
    margin-top: 8px;
    line-height: 1.7;
}
.proposal-preview {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 11px;
    background: #fffefa;
    border: 1px solid #eadfc9;
    border-radius: 11px;
    scrollbar-width: thin;
    scrollbar-color: #dac8a5 transparent;
}
.proposal-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8a6728;
    font-size: 9px;
}
.proposal-label svg {
    width: 14px;
    height: 14px;
}
.proposal-preview h5 {
    font-size: 11px;
    font-weight: 500;
    margin: 10px 0 5px;
}
.proposal-fund {
    font-size: 8px;
    color: #78654d;
    line-height: 1.8;
}
.proposal-preview dl {
    margin: 10px 0 0;
}
.proposal-preview dl > div {
    border-top: 1px solid #eee5d8;
    padding: 10px 0;
}
.proposal-preview dt {
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 5px;
}
.proposal-preview dd {
    font-size: 9px;
    line-height: 1.85;
    color: #78654d;
    margin: 0;
}
.proposal-review {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    background: #f1f3e9;
    border-radius: 7px;
    padding: 8px;
    font-size: 8px;
    color: #596943;
    line-height: 1.7;
}
.proposal-review svg {
    width: 13px;
    height: 13px;
}
.phone-funding .phone-bottom {
    padding-top: 7px;
    padding-bottom: 15px;
    font-size: 7px;
}
.funding-content .screen-eyebrow {
    margin-bottom: 8px;
}
.funding-content .roadmap-tabs {
    margin-bottom: 10px;
    padding: 3px;
}
.funding-content .roadmap-tabs button {
    min-height: 28px;
}
.funding-options button {
    min-height: 55px;
    padding: 8px;
}
.proposal-teaser {
    padding: 8px;
    margin-top: 8px;
}
.proposal-teaser p {
    line-height: 1.6;
}
.proposal-action {
    width: 100%;
}

/* ==========================================================================
   Stages + FAQ sections (เนื้อหา HTML ที่ Google และ AI อ่านได้โดยไม่ต้องรัน JS)
   ========================================================================== */
.stages-section {
    padding-top: 45px;
    padding-bottom: 40px;
    scroll-margin-top: 20px;
}
.stages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.stage-card {
    position: relative;
    padding: 26px 22px 24px;
    background: #fffdf8;
    border: 1px solid #f3e8d6;
    border-radius: 24px;
    box-shadow: 0 16px 40px #a27d2310;
}
.stage-card:nth-child(2).will-reveal {
    transition-delay: 0.08s;
}
.stage-card:nth-child(3).will-reveal {
    transition-delay: 0.16s;
}
.stage-card:nth-child(4).will-reveal {
    transition-delay: 0.24s;
}
.stage-card-code {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    background: linear-gradient(145deg, #fff0be, #ffdf86);
    border: 1px solid #ffdda1;
    border-radius: 15px;
    color: #71451d;
    font-size: 15px;
    font-weight: 600;
    transform: rotate(-5deg);
}
.stage-card h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.3px;
    color: #4f311b;
}
.stage-card .stage-card-short {
    margin: 2px 0 10px;
    font-size: 11px;
    font-weight: 500;
    color: #c07f0a;
}
.stage-card > p:not(.stage-card-short) {
    min-height: 3.8em;
    font-size: 12px;
    line-height: 1.9;
    color: #79664f;
}
.stage-card h4 {
    margin: 16px 0 8px;
    padding-top: 14px;
    border-top: 1px dashed #eadfcc;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #886226;
}
.stage-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    color: #5b3a1e;
}
.stage-card li svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: #6f8a43;
}
.outputs-panel {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 22px;
    padding: 22px 28px;
    background: #fff6df;
    border: 1px solid #f6e3b8;
    border-radius: 24px;
}
.outputs-panel h3 {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
.outputs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.outputs-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #fffdf8;
    border: 1px solid #f0e2c6;
    border-radius: 999px;
    font-size: 12px;
    color: #5b3a1e;
}
.outputs-list svg {
    width: 16px;
    height: 16px;
    color: #b7791a;
}
.faq-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 56px;
    padding-top: 70px;
    padding-bottom: 90px;
    scroll-margin-top: 20px;
}
.faq-intro {
    position: sticky;
    top: 30px;
}
.faq-intro h2 {
    margin: 9px 0;
    font-size: 39px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -1.4px;
    color: var(--ink);
}
.faq-intro h2 > span {
    color: #ce8b0c;
}
.faq-intro p {
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.9;
    color: #79664f;
}
.faq-intro p b {
    font-weight: 600;
    color: #06a746;
}
.faq-list {
    padding: 8px 32px;
    background: #fffdf8;
    border: 1px solid #fff;
    border-radius: 28px;
    box-shadow: 0 16px 46px #a27d2310;
}
.faq-list .faq-item {
    padding: 19px 0;
}
.faq-list .faq-item:last-child {
    border-bottom: 0;
}
.faq-list .faq-item summary {
    font-size: 14px;
    font-weight: 500;
    color: #4f311b;
}
.faq-list .faq-item p {
    font-size: 13px;
    color: #79664f;
}
@media (max-width: 1199px) {
    .stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stage-card > p:not(.stage-card-short) {
        min-height: 0;
    }
}
@media (max-width: 959px) {
    .faq-section {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 50px;
        padding-bottom: 70px;
    }
    .faq-intro {
        position: static;
        text-align: center;
    }
    .faq-intro h2 {
        font-size: 34px;
    }
    .outputs-panel {
        flex-direction: column;
        align-items: flex-start;
    }
    .outputs-list {
        width: 100%;
    }
}
@media (max-width: 699px) {
    .stages-section {
        padding-top: 30px;
    }
    .stages-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .outputs-panel {
        padding: 20px;
    }
    .outputs-list li {
        font-size: 11px;
    }
    .faq-intro h2 {
        font-size: 29px;
        letter-spacing: -1.1px;
    }
    .faq-intro p {
        font-size: 13px;
    }
    .faq-list {
        padding: 4px 20px;
        border-radius: 22px;
    }
    .faq-list .faq-item summary {
        font-size: 13px;
    }
    .faq-list .faq-item p {
        font-size: 12px;
    }
}