@press2ai/theme-specialist-glossy 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/glossy.css +77 -66
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@press2ai/theme-specialist-glossy",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
4
4
  "description": "Classless, AI-first theme inspired by Stripe. Framework-agnostic templates (Hono, Astro, raw HTML). Semantic HTML, Schema.org microdata, JSON-LD — built for LLM crawlers.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/styles/glossy.css CHANGED
@@ -34,10 +34,10 @@ body {
34
34
  }
35
35
 
36
36
  h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; }
37
- h1 { font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; margin-bottom: var(--g4); }
38
- h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; margin-bottom: var(--g3); }
37
+ h1 { font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; margin-bottom: var(--g3); }
38
+ h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; margin-bottom: var(--g2); }
39
39
  h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; margin-bottom: var(--g2); }
40
- p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin-bottom: var(--g3); max-width: var(--measure); }
40
+ p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin-bottom: var(--g2); max-width: var(--measure); }
41
41
  a { color: var(--violet); text-decoration: none; transition: color var(--ease); }
42
42
  a:hover { color: var(--ink); }
43
43
  small { font-size: var(--t-xs); color: var(--ink-3); }
@@ -52,7 +52,7 @@ body > header {
52
52
  }
53
53
  body > header nav {
54
54
  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
55
- height: 56px; display: flex; align-items: center; justify-content: space-between;
55
+ height: 48px; display: flex; align-items: center; justify-content: space-between;
56
56
  }
57
57
  body > header nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
58
58
  body > header nav a strong { font-size: var(--t-md); font-weight: 700; color: var(--ink); }
@@ -60,21 +60,21 @@ body > header nav a strong { font-size: var(--t-md); font-weight: 700; color: va
60
60
  /* Main */
61
61
  main {
62
62
  max-width: var(--container); margin-inline: auto;
63
- padding-inline: var(--pad); padding-top: 0; padding-bottom: var(--g7);
63
+ padding-inline: var(--pad); padding-top: 0; padding-bottom: var(--g6);
64
64
  }
65
- main > h1:first-child, main > article:first-child { margin-top: var(--g6); }
66
- main > section { margin-bottom: var(--g7); }
65
+ main > h1:first-child, main > article:first-child { margin-top: var(--g5); }
66
+ main > section { margin-bottom: var(--g5); }
67
67
 
68
68
  /* Footer */
69
- body > footer { border-top: 1px solid var(--line); padding: var(--g5) 0; text-align: center; }
69
+ body > footer { border-top: 1px solid var(--line); padding: var(--g4) 0; text-align: center; }
70
70
  body > footer small { display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); color: var(--ink-3); }
71
71
  body > footer a { color: var(--violet); }
72
72
 
73
73
  /* Hero */
74
74
  hgroup {
75
75
  position: relative; text-align: center; isolation: isolate; overflow: hidden;
76
- padding: var(--g7) var(--pad) var(--g6);
77
- margin: 0 calc(50% - 50vw) var(--g7) calc(50% - 50vw);
76
+ padding: var(--g6) var(--pad) var(--g5);
77
+ margin: 0 calc(50% - 50vw) var(--g5) calc(50% - 50vw);
78
78
  background:
79
79
  radial-gradient(ellipse 70% 50% at 20% 30%, var(--violet-glow) 0%, transparent 60%),
80
80
  radial-gradient(ellipse 50% 60% at 80% 20%, rgba(13,148,136,.12) 0%, transparent 55%),
@@ -93,7 +93,7 @@ hgroup::before {
93
93
  z-index: -1;
94
94
  }
95
95
  hgroup > * { position: relative; }
96
- hgroup > p:first-child { display: inline-flex; margin-bottom: var(--g4); padding: 0; }
96
+ hgroup > p:first-child { display: inline-flex; margin-bottom: var(--g3); padding: 0; }
97
97
  hgroup > p:first-child small {
98
98
  display: inline-flex; align-items: center; gap: var(--g1);
99
99
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
@@ -102,16 +102,16 @@ hgroup > p:first-child small {
102
102
  box-shadow: var(--shadow);
103
103
  }
104
104
  hgroup > p:first-child small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00d24a; box-shadow: 0 0 0 3px rgba(0,210,74,.2); }
105
- hgroup h1 { max-width: 18ch; margin: 0 auto var(--g4); color: var(--ink); }
105
+ hgroup h1 { max-width: 18ch; margin: 0 auto var(--g3); color: var(--ink); }
106
106
  hgroup p { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); margin: 0 auto 0; }
107
107
 
108
108
  /* Hero CTAs */
109
109
  .hero-ctas {
110
110
  display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
111
- margin-top: var(--g5); margin-bottom: 0;
111
+ margin-top: var(--g4); margin-bottom: 0;
112
112
  }
113
113
  .cta-primary, .cta-secondary {
114
- display: inline-flex; align-items: center; height: 48px; padding: 0 var(--g4);
114
+ display: inline-flex; align-items: center; height: 44px; padding: 0 var(--g4);
115
115
  border-radius: var(--pill); font-weight: 600; font-size: var(--t-sm); transition: all var(--ease);
116
116
  }
117
117
  .cta-primary {
@@ -124,8 +124,8 @@ hgroup p { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-w
124
124
 
125
125
  /* Search */
126
126
  form[role="search"] {
127
- display: flex; max-width: var(--w-6); height: 52px;
128
- margin: var(--g5) auto 0; background: var(--white);
127
+ display: flex; max-width: var(--w-6); height: 48px;
128
+ margin: var(--g4) auto 0; background: var(--white);
129
129
  border: 1px solid var(--line); border-radius: var(--pill);
130
130
  overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--ease);
131
131
  }
@@ -144,27 +144,27 @@ form[role="search"] button {
144
144
  form[role="search"] button:hover { background: var(--ink); }
145
145
 
146
146
  /* Stats */
147
- section[aria-label] > p { text-align: center; font-size: var(--t-sm); color: var(--ink-2); margin: 0 auto var(--g4); max-width: var(--measure); }
147
+ section[aria-label] > p { text-align: center; font-size: var(--t-sm); color: var(--ink-2); margin: 0 auto var(--g3); max-width: var(--measure); }
148
148
  section:has(> dl) { margin-bottom: 0; }
149
149
  section > dl {
150
- display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--g4);
151
- padding: var(--g5); margin: 0 auto var(--g7); max-width: var(--w-8);
150
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--g3);
151
+ padding: var(--g4); margin: 0 auto var(--g5); max-width: var(--w-8);
152
152
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
153
153
  box-shadow: var(--shadow-md);
154
154
  }
155
155
  section > dl div { text-align: center; }
156
- .stat-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto var(--g2); background: var(--violet-s); border-radius: 50%; color: var(--violet); }
157
- .stat-icon svg { width: 20px; height: 20px; }
156
+ .stat-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto var(--g1); background: var(--violet-s); border-radius: 50%; color: var(--violet); }
157
+ .stat-icon svg { width: 18px; height: 18px; }
158
158
  section > dl dt { font-size: var(--t-xl); font-weight: 800; line-height: 1.2; color: var(--violet); }
159
- section > dl dd { margin: var(--g1) 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
159
+ section > dl dd { margin: 4px 0 0; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
160
160
 
161
- /* Category pills */
162
- nav[aria-label] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g2); margin-bottom: var(--g7); }
161
+ /* Category pills — inside trainers section */
162
+ nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); margin-bottom: var(--g3); grid-column: 1 / -1; }
163
163
  nav[aria-label] a {
164
- display: inline-flex; align-items: center; height: 36px; padding: 0 var(--g3);
164
+ display: inline-flex; align-items: center; height: 32px; padding: 0 var(--g2);
165
165
  border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
166
166
  background: var(--white); border: 1px solid var(--line); color: var(--ink-2);
167
- transition: all var(--ease); box-shadow: var(--shadow);
167
+ transition: all var(--ease);
168
168
  }
169
169
  nav[aria-label] a:nth-child(5n+1):hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }
170
170
  nav[aria-label] a:nth-child(5n+2):hover { border-color: var(--teal); color: var(--teal); background: var(--teal-s); }
@@ -172,50 +172,60 @@ nav[aria-label] a:nth-child(5n+3):hover { border-color: var(--rose); color: var(
172
172
  nav[aria-label] a:nth-child(5n+4):hover { border-color: var(--amber); color: var(--amber); background: var(--amber-s); }
173
173
  nav[aria-label] a:nth-child(5n+5):hover { border-color: var(--sky); color: var(--sky); background: var(--sky-s); }
174
174
 
175
+ /* How it works — full-bleed band */
176
+ .how-it-works {
177
+ margin: 0 calc(50% - 50vw) var(--g5) calc(50% - 50vw);
178
+ padding: var(--g5) var(--pad);
179
+ background: var(--white);
180
+ border-top: 1px solid var(--line);
181
+ border-bottom: 1px solid var(--line);
182
+ }
183
+ .how-it-works > section { max-width: var(--container); margin: 0 auto; }
184
+
175
185
  /* Steps */
176
- section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g5); }
186
+ section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g4); }
177
187
  section > ol {
178
188
  list-style: none; padding: 0; display: grid;
179
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g4); margin: 0; counter-reset: steps;
189
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3); margin: 0; counter-reset: steps;
180
190
  }
181
191
  section > ol li {
182
- counter-increment: steps; background: var(--white); border: 1px solid var(--line);
183
- border-radius: var(--r-lg); padding: var(--g5) var(--g4); text-align: center;
184
- box-shadow: var(--shadow); transition: all var(--ease);
192
+ counter-increment: steps; background: var(--bg); border: 1px solid var(--line);
193
+ border-radius: var(--r-lg); padding: var(--g4) var(--g3); text-align: center;
194
+ transition: all var(--ease);
185
195
  }
186
196
  section > ol li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
187
197
  section > ol li::before {
188
198
  content: counter(steps); display: flex; align-items: center; justify-content: center;
189
- width: 48px; height: 48px; margin: 0 auto var(--g3);
190
- border-radius: 50%; font-size: var(--t-md); font-weight: 700;
199
+ width: 40px; height: 40px; margin: 0 auto var(--g2);
200
+ border-radius: 50%; font-size: var(--t-sm); font-weight: 700;
191
201
  }
192
202
  section > ol li:nth-child(5n+1)::before { background: var(--violet-s); color: var(--violet); }
193
203
  section > ol li:nth-child(5n+2)::before { background: var(--teal-s); color: var(--teal); }
194
204
  section > ol li:nth-child(5n+3)::before { background: var(--amber-s); color: var(--amber); }
195
205
  section > ol li:nth-child(5n+4)::before { background: var(--rose-s); color: var(--rose); }
196
206
  section > ol li:nth-child(5n+5)::before { background: var(--sky-s); color: var(--sky); }
197
- section > ol li strong { display: block; font-size: var(--t-md); line-height: 1.4; margin-bottom: var(--g1); color: var(--ink); }
198
- section > ol li span { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-3); }
207
+ section > ol li strong { display: block; font-size: var(--t-sm); line-height: 1.4; margin-bottom: 4px; color: var(--ink); }
208
+ section > ol li span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
199
209
 
200
210
  /* Trainer cards */
201
211
  section:has(> article[itemscope]) {
202
- display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--g4);
212
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3);
203
213
  }
204
- section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: var(--g4); }
214
+ section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: var(--g2); }
205
215
  article[itemscope] {
206
216
  position: relative; background: var(--card); border: 1px solid var(--line);
207
- border-radius: var(--r-lg); padding: var(--g4);
217
+ border-radius: var(--r-lg); padding: var(--g3);
208
218
  display: flex; flex-direction: column;
209
219
  box-shadow: var(--shadow); transition: all var(--ease);
210
220
  }
211
- article[itemscope]:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
221
+ article[itemscope]:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
212
222
 
213
223
  /* Card avatar */
214
224
  .card-avatar {
215
- width: 48px; height: 48px; border-radius: 50%;
225
+ width: 40px; height: 40px; border-radius: 50%;
216
226
  display: flex; align-items: center; justify-content: center;
217
- font-size: var(--t-sm); font-weight: 700; color: var(--white);
218
- margin-bottom: var(--g3); flex-shrink: 0;
227
+ font-size: var(--t-xs); font-weight: 700; color: var(--white);
228
+ margin-bottom: var(--g2); flex-shrink: 0;
219
229
  }
220
230
  article[itemscope]:nth-child(5n+2) .card-avatar { background: var(--violet); }
221
231
  article[itemscope]:nth-child(5n+3) .card-avatar { background: var(--teal); }
@@ -225,27 +235,27 @@ article[itemscope]:nth-child(5n+6) .card-avatar { background: var(--sky); }
225
235
  article[itemscope]:nth-child(5n+1) .card-avatar,
226
236
  article[itemscope]:first-child .card-avatar { background: var(--violet); }
227
237
 
228
- article[itemscope] header { margin-bottom: var(--g2); }
229
- article[itemscope] h2 { font-size: var(--t-md); line-height: 1.3; margin: 0 0 4px; }
238
+ article[itemscope] header { margin-bottom: var(--g1); }
239
+ article[itemscope] h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
230
240
  article[itemscope] h2 a { color: var(--ink); }
231
241
  article[itemscope] h2 a:hover { color: var(--violet); }
232
- article[itemscope] header p { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); margin: 0; }
233
- .card-city { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--ink-3); font-size: var(--t-xs); }
242
+ article[itemscope] header p { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); margin: 0; }
243
+ .card-city { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--ink-3); font-size: var(--t-xs); }
234
244
  .card-city::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
235
- article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g2) 0 0; color: var(--ink-2); }
236
- article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--g2); }
245
+ article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
246
+ article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
237
247
  article[itemscope] ul li {
238
248
  background: var(--violet-s); color: var(--violet);
239
- padding: 2px var(--g1); border-radius: var(--pill); font-size: 0.7rem; font-weight: 500;
249
+ padding: 1px var(--g1); border-radius: var(--pill); font-size: 0.7rem; font-weight: 500;
240
250
  }
241
251
 
242
252
  /* Card CTA */
243
253
  .card-cta {
244
- display: inline-flex; align-items: center; margin-top: auto; padding-top: var(--g3);
254
+ display: inline-flex; align-items: center; margin-top: auto; padding-top: var(--g2);
245
255
  font-size: var(--t-xs); font-weight: 600; color: var(--violet);
246
256
  transition: all var(--ease);
247
257
  }
248
- .card-cta:hover { color: var(--ink); gap: 6px; }
258
+ .card-cta:hover { color: var(--ink); gap: 4px; }
249
259
 
250
260
  /* Single trainer */
251
261
  main > article {
@@ -261,7 +271,7 @@ main > article address {
261
271
  padding: var(--g1) var(--g2); border-radius: var(--r); margin-bottom: var(--g3);
262
272
  color: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-sm);
263
273
  }
264
- main > article section { margin: var(--g5) 0; }
274
+ main > article section { margin: var(--g4) 0; }
265
275
  main > article section h2 { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 var(--g2); }
266
276
  main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
267
277
  main > article ul li {
@@ -271,27 +281,27 @@ main > article ul li {
271
281
  main > article dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--g1) var(--g3); }
272
282
  main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
273
283
  main > article dd { margin: 0; font-size: var(--t-sm); }
274
- main > article > footer { margin-top: var(--g5); padding-top: var(--g3); border-top: 1px solid var(--line); text-align: center; }
284
+ main > article > footer { margin-top: var(--g4); padding-top: var(--g3); border-top: 1px solid var(--line); text-align: center; }
275
285
 
276
286
  /* Pagination */
277
- main > nav p { display: flex; align-items: center; justify-content: center; gap: var(--g3); padding: var(--g4) 0; font-size: var(--t-sm); color: var(--ink-3); }
287
+ main > nav p { display: flex; align-items: center; justify-content: center; gap: var(--g3); padding: var(--g3) 0; font-size: var(--t-sm); color: var(--ink-3); }
278
288
  main > nav a {
279
- height: 36px; display: inline-flex; align-items: center; padding: 0 var(--g3);
289
+ height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
280
290
  border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
281
- font-size: var(--t-xs); font-weight: 500; transition: all var(--ease); box-shadow: var(--shadow);
291
+ font-size: var(--t-xs); font-weight: 500; transition: all var(--ease);
282
292
  }
283
293
  main > nav a:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
284
294
 
285
295
  /* Trust */
286
296
  .trust {
287
- margin: var(--g6) auto; padding: var(--g5); max-width: var(--w-8);
297
+ margin: var(--g5) auto; padding: var(--g4); max-width: var(--w-8);
288
298
  background: linear-gradient(135deg, var(--teal-s) 0%, #f0fdf8 100%);
289
299
  border: 1px solid rgba(13,148,136,.15); border-radius: var(--r-lg); text-align: center;
290
300
  }
291
301
  .trust strong {
292
- display: block; font-size: var(--t-lg); line-height: 1.3; margin-bottom: var(--g4); color: var(--teal);
302
+ display: block; font-size: var(--t-md); line-height: 1.3; margin-bottom: var(--g3); color: var(--teal);
293
303
  }
294
- .trust ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--g2); }
304
+ .trust ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--g1); }
295
305
  .trust li {
296
306
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
297
307
  display: flex; align-items: center; justify-content: center; gap: var(--g1);
@@ -301,14 +311,14 @@ main > nav a:hover { border-color: var(--violet); color: var(--violet); transfor
301
311
  /* Forms */
302
312
  label { display: block; font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; margin-bottom: var(--g1); }
303
313
  input[type="text"] {
304
- display: block; width: 100%; margin-top: var(--g1); height: 48px;
314
+ display: block; width: 100%; margin-top: var(--g1); height: 44px;
305
315
  padding: 0 var(--g3); background: var(--white); border: 1px solid var(--line);
306
316
  border-radius: var(--r); color: var(--ink); font-size: var(--t-sm); font-family: var(--font);
307
317
  transition: border-color var(--ease);
308
318
  }
309
319
  input[type="text"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); }
310
320
  form:not([role="search"]) button[type="submit"] {
311
- margin-top: var(--g3); height: 48px; padding: 0 var(--g4);
321
+ margin-top: var(--g3); height: 44px; padding: 0 var(--g4);
312
322
  border: none; border-radius: var(--pill); background: var(--violet); color: var(--white);
313
323
  font-size: var(--t-sm); font-weight: 600; font-family: var(--font); cursor: pointer;
314
324
  transition: all var(--ease); box-shadow: 0 4px 14px var(--violet-glow);
@@ -318,15 +328,16 @@ form:not([role="search"]) button[type="submit"]:hover { background: var(--ink);
318
328
  /* Responsive */
319
329
  @media (max-width: 640px) {
320
330
  :root { --pad: var(--g3); }
321
- main { padding: 0 var(--pad) var(--g5); }
322
- hgroup { padding: var(--g6) var(--pad) var(--g5); }
331
+ main { padding: 0 var(--pad) var(--g4); }
332
+ hgroup { padding: var(--g5) var(--pad) var(--g4); }
323
333
  section:has(> article[itemscope]) { grid-template-columns: 1fr; }
324
334
  section > ol { grid-template-columns: 1fr; }
325
- section > dl { grid-template-columns: 1fr; max-width: 100%; padding: var(--g4); }
326
- main > article { padding: var(--g4); }
335
+ section > dl { grid-template-columns: 1fr; max-width: 100%; padding: var(--g3); }
336
+ main > article { padding: var(--g3); }
327
337
  main > article dl { grid-template-columns: 1fr; gap: calc(var(--g1) / 2) 0; }
328
338
  main > article dt { margin-top: var(--g2); }
329
- form[role="search"] { height: 44px; }
339
+ form[role="search"] { height: 40px; }
330
340
  form[role="search"] input { font-size: var(--t-xs); }
331
341
  .trust ul { text-align: left; }
342
+ .how-it-works { padding: var(--g4) var(--pad); }
332
343
  }