/* ---------------------------------------------------------------------------
   Extracted from inline style="" / style-hover="" attributes.
   --------------------------------------------------------------------------- */

.st1 { background: var(--bg-app); min-height: 100vh; overflow-x: hidden; }
.st2 { position: sticky; top: 0; z-index: 50; background: rgba(8,20,16,0.80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-hairline); }
.st3 { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 32px; min-width: 0; }
.st4 { display: flex; align-items: center; gap: 10px; flex: none; }
.st5 { height: 24px; width: auto; display: block; }
.st6 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--text-primary); }
.st7 { color: var(--text-faint); font-weight: 500; }
.st8 { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; margin-left: 4px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.st9 { color: var(--text-muted); white-space: nowrap; }
.st10 { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); white-space: nowrap; }
.st11 { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; flex: none; }
.st12 { flex: 1 1 auto; min-width: 0; }
.st13 { display: flex; align-items: center; gap: 16px; flex: none; }
.st14 { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-2); }
.st15 { display: block; }
.st16 { position: relative; }
.st17 { position: absolute; inset: -80px 0 0 0; background: var(--gradient-hero); pointer-events: none; opacity: 0.3; }
.st18 { position: relative; max-width: 1200px; margin: 0 auto; padding: 136px 32px 128px; text-align: center; }
.st19 { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-2); margin-bottom: 28px; }
.st20 { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); display: block; }
.st21 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.st22 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 4.8vw, 68px); line-height: 1.06; letter-spacing: -0.032em; color: var(--text-primary); margin: 0 auto 36px; max-width: 15em; text-wrap: balance; }
.st23 { color: var(--accent); }
.st24 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.55; color: var(--text-secondary); margin: 0 auto 40px; max-width: 26em; text-wrap: pretty; }
.st25 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.st26 { max-width: 1200px; margin: 0 auto; padding: 116px 32px 120px; border-top: 1px solid var(--border-hairline); }
.st27 { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 72px; align-items: center; }
.st28 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); margin-bottom: 20px; }
.st29 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.026em; color: var(--text-primary); margin: 0 0 20px; text-wrap: balance; }
.st30 { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 26em; text-wrap: pretty; }
.st31 { display: flex; flex-direction: column; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.st32 { display: grid; grid-template-columns: 92px 1fr; gap: 24px; padding: 28px 28px; background: var(--surface-1); align-items: start; }
.st33 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); color: var(--text-faint); padding-top: 4px; }
.st34 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); margin-bottom: 6px; }
.st35 { font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.st36 { display: flex; align-items: center; gap: 14px; padding: 22px 28px; background: var(--ink-850); }
.st37 { flex: none; color: var(--text-accent); }
.st38 { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.st39 { background: var(--ink-950); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.st40 { max-width: 1200px; margin: 0 auto; padding: 112px 32px; }
.st41 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); margin-bottom: 40px; }
.st42 { margin: 0 0 56px; padding-left: 32px; border-left: 2px solid var(--accent); max-width: 60em; }
.st43 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.18; letter-spacing: -0.028em; color: var(--text-primary); margin: 0; text-wrap: balance; }
.st44 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; max-width: 1000px; }
.st45 { height: 1px; background: var(--border-subtle); margin-bottom: 20px; }
.st46 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.012em; }
.st47 { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; }
.st48 { max-width: 60em; margin-bottom: 56px; }
.st49 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.026em; color: var(--text-primary); margin: 0 0 16px; text-wrap: balance; }
.st50 { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0; text-wrap: pretty; }
.st51 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.st52 { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.st53 { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--brand-lilac); }
.st54 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.016em; color: var(--text-primary); margin-bottom: 8px; }
.st55 { font-size: 15px; font-weight: 600; color: var(--text-accent); margin-bottom: 10px; text-wrap: balance; }
.st56 { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.st57 { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--text-accent); }
.st58 { position: relative; border-top: 1px solid var(--border-hairline); overflow: hidden; }
.st59 { position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; opacity: 0.3; }
.st60 { position: relative; max-width: 1200px; margin: 0 auto; padding: 128px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.st61 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); margin-bottom: 24px; }
.st62 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 20px; max-width: 16em; text-wrap: balance; }
.st63 { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 36px; max-width: 28em; text-wrap: pretty; }
.st64 { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 720px; margin-bottom: 24px; text-align: left; }
.st65 { flex: 1 1 200px; }
.st66 { flex: 1 1 220px; }
.st67 { flex: 1 1 180px; }
.st68 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.st69 { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); flex-wrap: wrap; justify-content: center; }
.st70 { color: var(--border-accent); }
.st71 { border-top: 1px solid var(--border-hairline); background: var(--ink-950); }
.st72 { max-width: 1200px; margin: 0 auto; padding: 64px 32px 32px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.st73 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.st74 { font-size: 14px; line-height: 1.6; color: var(--text-faint); margin: 0; max-width: 22em; }
.st75 { display: flex; flex-direction: column; gap: 12px; }
.st76 { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.st77 { font-size: 14px; color: var(--text-muted); }
.st78 { font-size: 14px; color: var(--text-secondary); }
.st79 { max-width: 1200px; margin: 0 auto; padding: 24px 32px 40px; border-top: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.st80 { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.st81 { display: block; flex: none; }
.st82 { position: relative; max-width: 1200px; margin: 0 auto; padding: 104px 32px 96px; }
.st85 { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.2vw, 76px); line-height: 1.03; letter-spacing: -0.034em; color: var(--text-primary); margin: 0 0 28px; max-width: 20em; text-wrap: balance; }
.st86 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--text-secondary); margin: 0 0 40px; max-width: 34em; text-wrap: pretty; }
.st87 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.st88 { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-faint); margin: 0 0 72px; max-width: 44em; }
.st89 { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow-card), var(--glow-violet); overflow: hidden; }
.st90 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border-hairline); background: var(--surface-2); flex-wrap: wrap; }
.st91 { display: flex; align-items: center; gap: 10px; }
.st92 { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: block; }
.st93 { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.st94 { display: flex; align-items: center; gap: 8px; }
.st95 { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 4px 8px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); white-space: nowrap; }
.st96 { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.st97 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st98 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.st99 { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-2); padding: 20px; }
.st100 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.st101 { font-size: 12px; font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.st102 { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.st103 { display: flex; flex-direction: column; gap: 14px; }
.st104 { display: grid; grid-template-columns: 88px minmax(0, 1fr) 46px; gap: 14px; align-items: center; }
.st105 { font-size: 13px; color: var(--text-secondary); }
.st106 { height: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.06); display: block; position: relative; overflow: hidden; }
.st107 { position: absolute; inset: 0 6% 0 0; background: var(--gradient-brand-vivid); border-radius: var(--radius-pill); display: block; }
.st108 { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); text-align: right; }
.st109 { position: absolute; inset: 0 22% 0 0; background: rgba(20,184,166,0.55); border-radius: var(--radius-pill); display: block; }
.st110 { position: absolute; inset: 0 11% 0 0; background: rgba(20,184,166,0.55); border-radius: var(--radius-pill); display: block; }
.st111 { position: absolute; inset: 0 37% 0 0; background: rgba(245,158,11,0.55); border-radius: var(--radius-pill); display: block; }
.st112 { display: flex; flex-direction: column; gap: 18px; }
.st113 { font-size: 12px; font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.st114 { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.st115 { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); }
.st116 { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding-bottom: 5px; }
.st117 { height: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.06); display: block; position: relative; overflow: hidden; }
.st118 { position: absolute; inset: 0 28% 0 0; background: var(--gradient-brand-vivid); border-radius: var(--radius-pill); display: block; }
.st119 { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-2); padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.st120 { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--border-accent); border-radius: var(--radius-md); background: var(--gradient-brand-soft); }
.st121 { flex: none; margin-top: 2px; color: var(--text-accent); }
.st122 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.st123 { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.st124 { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-eyebrow); color: var(--text-accent); }
.st125 { font-size: 14px; line-height: 1.55; color: var(--text-secondary); max-width: 68em; }
.st126 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint); }
.st127 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.026em; color: var(--text-primary); margin: 0 0 24px; text-wrap: balance; }
.st128 { font-size: 17px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 20px; max-width: 34em; text-wrap: pretty; }
.st129 { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 34em; text-wrap: pretty; }
.st130 { padding: 22px 26px 18px; background: var(--surface-1); }
.st131 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); }
.st132 { display: flex; align-items: flex-start; gap: 14px; padding: 18px 26px; background: var(--surface-1); }
.st133 { flex: none; margin-top: 2px; color: var(--text-faint); }
.st134 { display: flex; align-items: center; gap: 14px; padding: 22px 26px; background: var(--ink-850); }
.st135 { font-size: 15px; line-height: 1.55; color: var(--text-primary); font-weight: 500; }
.st136 { max-width: 36em; margin-bottom: 56px; }
.st137 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.026em; color: var(--text-primary); margin: 0 0 18px; text-wrap: balance; }
.st138 { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin: 0; text-wrap: pretty; }
.st139 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
.st140 { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.st141 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st142 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); color: var(--text-faint); }
.st143 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.018em; color: var(--text-primary); margin-bottom: 8px; }
.st144 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.st145 { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); padding: 5px 10px; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--surface-2); }
.st146 { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
.st151 { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.st152 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; }
.st153 { color: var(--text-faint); display: flex; }
.st154 { color: var(--text-accent); display: flex; }
.st155 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.st156 { flex: 1; }
.st157 { max-width: 1200px; margin: 0 auto; padding: 120px 32px; }
.st158 { max-width: 34em; margin-bottom: 56px; }
.st159 { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-card); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.st160 { display: flex; align-items: center; gap: 12px; }
.st161 { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--brand-lilac); flex: none; }
.st162 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.016em; color: var(--text-primary); }
.st163 { display: flex; flex-wrap: wrap; gap: 8px; }
.st164 { font-size: 13px; color: var(--text-muted); padding: 4px 10px; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); }
.st165 { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-faint); margin: 28px 0 0; }
.st166 { position: relative; max-width: 1200px; margin: 0 auto; padding: 128px 32px 96px; text-align: center; }
.st168 { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -0.034em; color: var(--text-primary); margin: 0 auto 26px; max-width: 14em; text-wrap: balance; }
.st169 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--text-secondary); margin: 0 auto 38px; max-width: 26em; text-wrap: pretty; }
.st170 { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.01em; flex-wrap: wrap; }

/* The CTA row (.st87) is shared with the Inteligência de Gestão hero, which is
   still left-aligned — so centre it only inside the solution-page heroes. */
.st166 .st87 { justify-content: center; }
.st171 { max-width: 1200px; margin: 0 auto; padding: 100px 32px 112px; border-top: 1px solid var(--border-hairline); }
.st172 { display: flex; align-items: center; gap: 14px; padding: 20px 26px; background: var(--surface-1); }
.st173 { flex: none; color: var(--text-faint); }
.st174 { font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.st175 { font-size: 16px; line-height: 1.5; color: var(--text-primary); font-weight: 500; }
.st176 { max-width: 36em; margin-bottom: 48px; }
.st177 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.026em; color: var(--text-primary); margin: 0; text-wrap: balance; }
.st178 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.st179 { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.st180 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.014em; color: var(--text-primary); margin-bottom: 8px; }
.st181 { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.st182 { max-width: 34em; margin-bottom: 48px; }
.st183 { position: relative; max-width: 1200px; margin: 0 auto; padding: 120px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.st184 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 20px; max-width: 14em; text-wrap: balance; }
.st185 { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 34px; max-width: 26em; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   Capacitação em IA — topic lists inside the three trilha cards
   --------------------------------------------------------------------------- */

.trilha-topicos {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.trilha-topicos li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.trilha-topicos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-accent);
}

/* The highlighted third card sits on a lighter ground, so its list needs the
   brighter text to keep the same contrast as the other two. */
.trilha-topicos--destaque li { color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   Scroll reveal — see reveal.js

   Guarded behind .js-reveal, which reveal.js only sets once Motion has loaded
   and the visitor has not asked for reduced motion. Without that class every
   rule below is inert and the page is plain static content.
   --------------------------------------------------------------------------- */

/* Hiding the section rather than each block keeps a newly rendered node hidden
   from the moment it exists — the DC runtime can insert one at any time, and
   there is no frame in which it is visible before the script reaches it.
   opacity (not visibility) so the content stays in the accessibility tree. */
.js-reveal [data-reveal] { opacity: 0; }
.js-reveal [data-reveal].is-revealed { opacity: 1; }

/* The light sweep: on sections whose top edge carries a hairline, a gradient
   with its bright head at the leading edge grows across that rule and fades
   out, leaving the original hairline behind. transform + opacity on a 1px
   pseudo-element, so it costs the compositor nothing. */
.js-reveal [data-reveal-line] { position: relative; }

.js-reveal [data-reveal-line]::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(33, 214, 140, 0) 0%,
    rgba(33, 214, 140, 0.22) 42%,
    var(--accent) 100%
  );
}

.js-reveal [data-reveal-line].is-revealed::after {
  animation: df-reveal-sweep 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.04s forwards;
}

@keyframes df-reveal-sweep {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Belt and braces: a visitor who asks for reduced motion should never depend on
   the script having run to see the page. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; }
  .js-reveal [data-reveal-line]::after { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Rotating conic-gradient border
   --------------------------------------------------------------------------- */

/* One bright arc travelling around the frame: the conic gradient paints the
   border box while a flat fill covers the padding box, so only the 1px edge
   shows the sweep. @property is what makes the angle animatable — browsers
   without it keep the static gradient declared first, a fully lit ring rather
   than a bright arc frozen at an arbitrary spot. */
@property --df-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes df-border-spin {
  to { --df-border-angle: 360deg; }
}

.df-rotating-border {
  --df-border-fill: var(--surface-2);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--df-border-fill), var(--df-border-fill)) padding-box,
    conic-gradient(
        from 0deg,
        var(--border-accent) 0deg,
        var(--accent) 240deg,
        var(--accent) 270deg,
        var(--border-accent) 300deg,
        var(--accent) 330deg,
        var(--border-accent) 360deg
      )
      border-box;
  background:
    linear-gradient(var(--df-border-fill), var(--df-border-fill)) padding-box,
    conic-gradient(
        from var(--df-border-angle),
        var(--border-subtle) 0deg,
        var(--border-subtle) 240deg,
        var(--border-accent) 270deg,
        var(--accent) 300deg,
        var(--border-accent) 330deg,
        var(--border-subtle) 360deg
      )
      border-box;
  animation: df-border-spin 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .df-rotating-border {
    animation: none;
    background:
      linear-gradient(var(--df-border-fill), var(--df-border-fill)) padding-box,
      conic-gradient(
          from 0deg,
          var(--border-accent) 0deg,
          var(--accent) 240deg,
          var(--accent) 270deg,
          var(--border-accent) 300deg,
          var(--accent) 330deg,
          var(--border-accent) 360deg
        )
        border-box;
  }
}

/* The symptom list keeps its 1px dividers by showing the parent background
   through the flex gaps, so its fill has to be the colour that hairline
   already composites to — a flat --surface-2 would turn the light dividers
   dark and let the conic gradient leak between the rows. */
.st31.df-rotating-border {
  --df-border-fill: color-mix(in srgb, #fff 6%, var(--bg-app));
}

/* ---------------------------------------------------------------------------
   Card grids — shared hover
   --------------------------------------------------------------------------- */

/* Every card grid on the site lifts the same way. The three card classes
   differ in radius, padding and gap, but the motion is one definition rather
   than a copy per class. background-color, not the background shorthand, so a
   card that carries a background-image keeps it through the hover. */
.st52,
.st140,
.st159 {
  transition:
    border-color var(--dur-slower) var(--ease-standard),
    transform var(--dur-slower) var(--ease-standard),
    background-color var(--dur-slower) var(--ease-standard);
}

.st52:hover,
.st140:hover,
.st159:hover {
  border-color: var(--border-accent);
  background-color: var(--surface-hover);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   CTA button — adapted from Uiverse "young-newt-20" by dexter-st (MIT)
   https://uiverse.io/dexter-st/young-newt-20
   --------------------------------------------------------------------------- */

/* The original is a <button> with a Generate → Generating loading swap on
   :focus. Ours is an <a> to WhatsApp, so there is no pending state to show and
   that half is dropped; what is kept is the look — a chip embossed out of the
   page colour, a wave of light travelling through the label, and an edge that
   lights up on hover. The reference's blue (210deg) becomes the brand hue.

   The reference staggers one animation per letter, across a <span> per letter.
   That is not available here: the label holds the <sc-if> pair the DC runtime
   owns, and rewriting those children makes the runtime throw on the next PT/EN
   switch. A gradient clipped to the text draws the same travelling wave with no
   DOM of our own, which is also why this needs no JavaScript at all. */
.df-cta {
  --df-cta-hue: 155deg;
  --df-cta-radius: 22px;
  --df-cta-ring: 4px;
  --df-cta-fill: var(--ink-900);
  --df-cta-speed: 0.4s;

  position: relative;
  text-decoration: none;
}

.df-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 18px 9px 15px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background-color: var(--df-cta-fill);
  border: solid 1px #fff2;
  border-radius: var(--df-cta-radius);
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 2px rgba(255, 255, 255, 0.15),
    inset 0 4px 4px rgba(255, 255, 255, 0.1),
    inset 0 8px 8px rgba(255, 255, 255, 0.05),
    inset 0 16px 16px rgba(255, 255, 255, 0.05),
    0 -1px 1px rgba(0, 0, 0, 0.02),
    0 -2px 2px rgba(0, 0, 0, 0.03),
    0 -4px 4px rgba(0, 0, 0, 0.05),
    0 -8px 8px rgba(0, 0, 0, 0.06),
    0 -16px 16px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow var(--df-cta-speed),
    border var(--df-cta-speed),
    background-color var(--df-cta-speed);
}

.df-cta--lg .df-cta__btn {
  gap: 11px;
  padding: 12px 24px 12px 19px;
  font-size: 16px;
  --df-cta-radius: 26px;
}

/* The outer ring: a darker plate behind the chip that catches the glow. It is
   absolute against .df-cta, which is why the anchor carries position. */
.df-cta__btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--df-cta-ring));
  left: calc(0px - var(--df-cta-ring));
  width: calc(100% + var(--df-cta-ring) * 2);
  height: calc(100% + var(--df-cta-ring) * 2);
  border-radius: calc(var(--df-cta-radius) + var(--df-cta-ring));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
  transition: box-shadow var(--df-cta-speed), filter var(--df-cta-speed);
}

/* The green wash that rises from the bottom edge on hover. */
.df-cta__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--df-cta-radius);
  pointer-events: none;
  background-image: linear-gradient(
    0deg,
    #fff,
    hsl(var(--df-cta-hue), 100%, 70%),
    hsla(var(--df-cta-hue), 100%, 70%, 50%),
    8%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--df-cta-speed), filter var(--df-cta-speed);
}

.df-cta__icon {
  flex: none;
  width: 19px;
  height: 19px;
  fill: #e8e8e8;
  filter: drop-shadow(0 0 2px #fff9);
  animation: df-cta-flicker 2s linear 0.5s infinite;
  transition: fill var(--df-cta-speed), filter var(--df-cta-speed);
}

.df-cta--lg .df-cta__icon { width: 22px; height: 22px; }

@keyframes df-cta-flicker {
  50% { opacity: 0.3; }
}

.df-cta__label {
  position: relative;
  white-space: nowrap;
}

/* Guarded, because the fallback in a browser without background-clip:text
   would be transparent — that is, invisible — text. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .df-cta__label {
    background-image: linear-gradient(100deg, #fff6 38%, #fff 50%, #fff6 62%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: df-cta-shimmer 2.4s linear infinite;
  }
}

@keyframes df-cta-shimmer {
  to { background-position: -200% 0; }
}

/* Hover */
.df-cta:hover .df-cta__btn {
  border: solid 1px hsla(var(--df-cta-hue), 100%, 80%, 40%);
}

.df-cta:hover .df-cta__btn::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--df-cta-hue), 100%, 70%, 30%) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.df-cta:hover .df-cta__btn::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
}

.df-cta:hover .df-cta__icon {
  fill: #fff;
  filter:
    drop-shadow(0 0 3px hsl(var(--df-cta-hue), 100%, 70%))
    drop-shadow(0 -4px 6px #0009);
  animation: none;
}

.df-cta:hover .df-cta__label {
  color: #fff;
  -webkit-text-fill-color: #fff;
  animation: none;
}

/* Active */
.df-cta:active .df-cta__btn {
  border: solid 1px hsla(var(--df-cta-hue), 100%, 80%, 70%);
  background-color: hsla(var(--df-cta-hue), 50%, 20%, 0.5);
}

.df-cta:active .df-cta__btn::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--df-cta-hue), 100%, 70%, 80%) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.df-cta:active .df-cta__btn::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}

.df-cta:active .df-cta__label {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 0 1px hsla(var(--df-cta-hue), 100%, 90%, 90%);
  animation: none;
}

/* The reference spent :focus on its loading swap, which left keyboard users
   with no ring at all. This is a real one. */
.df-cta:focus-visible {
  outline: none;
}

.df-cta:focus-visible .df-cta__btn {
  border: solid 1px hsla(var(--df-cta-hue), 100%, 80%, 70%);
  box-shadow: var(--focus-ring-shadow);
}

/* The shimmer and the flicker are decoration; the lit hover state is not, so
   only the looping animations stop here. */
@media (prefers-reduced-motion: reduce) {
  .df-cta__icon,
  .df-cta__label {
    animation: none;
  }
  .df-cta__label {
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
}