@press2ai/theme-specialist-glossy 0.5.1 → 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 +70 -72
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@press2ai/theme-specialist-glossy",
3
- "version": "0.5.1",
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); }
@@ -174,61 +174,58 @@ nav[aria-label] a:nth-child(5n+5):hover { border-color: var(--sky); color: var(-
174
174
 
175
175
  /* How it works — full-bleed band */
176
176
  .how-it-works {
177
- margin: 0 calc(50% - 50vw) var(--g7) calc(50% - 50vw);
178
- padding: var(--g7) var(--pad);
177
+ margin: 0 calc(50% - 50vw) var(--g5) calc(50% - 50vw);
178
+ padding: var(--g5) var(--pad);
179
179
  background: var(--white);
180
180
  border-top: 1px solid var(--line);
181
181
  border-bottom: 1px solid var(--line);
182
182
  }
183
- .how-it-works > section {
184
- max-width: var(--container);
185
- margin: 0 auto;
186
- }
183
+ .how-it-works > section { max-width: var(--container); margin: 0 auto; }
187
184
 
188
185
  /* Steps */
189
- section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g5); }
186
+ section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g4); }
190
187
  section > ol {
191
188
  list-style: none; padding: 0; display: grid;
192
- 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;
193
190
  }
194
191
  section > ol li {
195
- counter-increment: steps; background: var(--white); border: 1px solid var(--line);
196
- border-radius: var(--r-lg); padding: var(--g5) var(--g4); text-align: center;
197
- 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);
198
195
  }
199
196
  section > ol li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
200
197
  section > ol li::before {
201
198
  content: counter(steps); display: flex; align-items: center; justify-content: center;
202
- width: 48px; height: 48px; margin: 0 auto var(--g3);
203
- 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;
204
201
  }
205
202
  section > ol li:nth-child(5n+1)::before { background: var(--violet-s); color: var(--violet); }
206
203
  section > ol li:nth-child(5n+2)::before { background: var(--teal-s); color: var(--teal); }
207
204
  section > ol li:nth-child(5n+3)::before { background: var(--amber-s); color: var(--amber); }
208
205
  section > ol li:nth-child(5n+4)::before { background: var(--rose-s); color: var(--rose); }
209
206
  section > ol li:nth-child(5n+5)::before { background: var(--sky-s); color: var(--sky); }
210
- section > ol li strong { display: block; font-size: var(--t-md); line-height: 1.4; margin-bottom: var(--g1); color: var(--ink); }
211
- 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); }
212
209
 
213
210
  /* Trainer cards */
214
211
  section:has(> article[itemscope]) {
215
- 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);
216
213
  }
217
- 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); }
218
215
  article[itemscope] {
219
216
  position: relative; background: var(--card); border: 1px solid var(--line);
220
- border-radius: var(--r-lg); padding: var(--g4);
217
+ border-radius: var(--r-lg); padding: var(--g3);
221
218
  display: flex; flex-direction: column;
222
219
  box-shadow: var(--shadow); transition: all var(--ease);
223
220
  }
224
- 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); }
225
222
 
226
223
  /* Card avatar */
227
224
  .card-avatar {
228
- width: 48px; height: 48px; border-radius: 50%;
225
+ width: 40px; height: 40px; border-radius: 50%;
229
226
  display: flex; align-items: center; justify-content: center;
230
- font-size: var(--t-sm); font-weight: 700; color: var(--white);
231
- 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;
232
229
  }
233
230
  article[itemscope]:nth-child(5n+2) .card-avatar { background: var(--violet); }
234
231
  article[itemscope]:nth-child(5n+3) .card-avatar { background: var(--teal); }
@@ -238,27 +235,27 @@ article[itemscope]:nth-child(5n+6) .card-avatar { background: var(--sky); }
238
235
  article[itemscope]:nth-child(5n+1) .card-avatar,
239
236
  article[itemscope]:first-child .card-avatar { background: var(--violet); }
240
237
 
241
- article[itemscope] header { margin-bottom: var(--g2); }
242
- 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; }
243
240
  article[itemscope] h2 a { color: var(--ink); }
244
241
  article[itemscope] h2 a:hover { color: var(--violet); }
245
- article[itemscope] header p { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); margin: 0; }
246
- .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); }
247
244
  .card-city::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
248
- article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g2) 0 0; color: var(--ink-2); }
249
- 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); }
250
247
  article[itemscope] ul li {
251
248
  background: var(--violet-s); color: var(--violet);
252
- 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;
253
250
  }
254
251
 
255
252
  /* Card CTA */
256
253
  .card-cta {
257
- 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);
258
255
  font-size: var(--t-xs); font-weight: 600; color: var(--violet);
259
256
  transition: all var(--ease);
260
257
  }
261
- .card-cta:hover { color: var(--ink); gap: 6px; }
258
+ .card-cta:hover { color: var(--ink); gap: 4px; }
262
259
 
263
260
  /* Single trainer */
264
261
  main > article {
@@ -274,7 +271,7 @@ main > article address {
274
271
  padding: var(--g1) var(--g2); border-radius: var(--r); margin-bottom: var(--g3);
275
272
  color: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-sm);
276
273
  }
277
- main > article section { margin: var(--g5) 0; }
274
+ main > article section { margin: var(--g4) 0; }
278
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); }
279
276
  main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
280
277
  main > article ul li {
@@ -284,27 +281,27 @@ main > article ul li {
284
281
  main > article dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--g1) var(--g3); }
285
282
  main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
286
283
  main > article dd { margin: 0; font-size: var(--t-sm); }
287
- 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; }
288
285
 
289
286
  /* Pagination */
290
- 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); }
291
288
  main > nav a {
292
- 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);
293
290
  border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
294
- 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);
295
292
  }
296
293
  main > nav a:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
297
294
 
298
295
  /* Trust */
299
296
  .trust {
300
- 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);
301
298
  background: linear-gradient(135deg, var(--teal-s) 0%, #f0fdf8 100%);
302
299
  border: 1px solid rgba(13,148,136,.15); border-radius: var(--r-lg); text-align: center;
303
300
  }
304
301
  .trust strong {
305
- 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);
306
303
  }
307
- .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); }
308
305
  .trust li {
309
306
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
310
307
  display: flex; align-items: center; justify-content: center; gap: var(--g1);
@@ -314,14 +311,14 @@ main > nav a:hover { border-color: var(--violet); color: var(--violet); transfor
314
311
  /* Forms */
315
312
  label { display: block; font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; margin-bottom: var(--g1); }
316
313
  input[type="text"] {
317
- display: block; width: 100%; margin-top: var(--g1); height: 48px;
314
+ display: block; width: 100%; margin-top: var(--g1); height: 44px;
318
315
  padding: 0 var(--g3); background: var(--white); border: 1px solid var(--line);
319
316
  border-radius: var(--r); color: var(--ink); font-size: var(--t-sm); font-family: var(--font);
320
317
  transition: border-color var(--ease);
321
318
  }
322
319
  input[type="text"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); }
323
320
  form:not([role="search"]) button[type="submit"] {
324
- margin-top: var(--g3); height: 48px; padding: 0 var(--g4);
321
+ margin-top: var(--g3); height: 44px; padding: 0 var(--g4);
325
322
  border: none; border-radius: var(--pill); background: var(--violet); color: var(--white);
326
323
  font-size: var(--t-sm); font-weight: 600; font-family: var(--font); cursor: pointer;
327
324
  transition: all var(--ease); box-shadow: 0 4px 14px var(--violet-glow);
@@ -331,15 +328,16 @@ form:not([role="search"]) button[type="submit"]:hover { background: var(--ink);
331
328
  /* Responsive */
332
329
  @media (max-width: 640px) {
333
330
  :root { --pad: var(--g3); }
334
- main { padding: 0 var(--pad) var(--g5); }
335
- 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); }
336
333
  section:has(> article[itemscope]) { grid-template-columns: 1fr; }
337
334
  section > ol { grid-template-columns: 1fr; }
338
- section > dl { grid-template-columns: 1fr; max-width: 100%; padding: var(--g4); }
339
- main > article { padding: var(--g4); }
335
+ section > dl { grid-template-columns: 1fr; max-width: 100%; padding: var(--g3); }
336
+ main > article { padding: var(--g3); }
340
337
  main > article dl { grid-template-columns: 1fr; gap: calc(var(--g1) / 2) 0; }
341
338
  main > article dt { margin-top: var(--g2); }
342
- form[role="search"] { height: 44px; }
339
+ form[role="search"] { height: 40px; }
343
340
  form[role="search"] input { font-size: var(--t-xs); }
344
341
  .trust ul { text-align: left; }
342
+ .how-it-works { padding: var(--g4) var(--pad); }
345
343
  }