@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

package/section-library/contact/section.json

@@ -0,0 +1,106 @@
+{
+  "type": "contact",
+  "definition": {
+    "name": "Visit us",
+    "version": 1,
+    "component": "sections/Contact.astro",
+    "description": "Address, opening hours, phone and email, with a directions link.",
+    "variants": [
+      "split",
+      "stacked"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Visit us"
+      },
+      "address": {
+        "label": "Address",
+        "type": "textarea",
+        "default": "",
+        "translatable": false
+      },
+      "directions": {
+        "label": "Directions link",
+        "type": "link",
+        "help": "A Google or Apple Maps link to the address."
+      },
+      "hours": {
+        "label": "Opening hours",
+        "type": "list",
+        "itemLabel": "days",
+        "max": 14,
+        "fields": {
+          "days": {
+            "label": "Days",
+            "type": "text",
+            "placeholder": "Mon – Fri"
+          },
+          "hours": {
+            "label": "Hours",
+            "type": "text",
+            "placeholder": "9:00 – 17:00",
+            "translatable": false
+          }
+        }
+      },
+      "phone": {
+        "label": "Phone",
+        "type": "text",
+        "default": "",
+        "translatable": false
+      },
+      "email": {
+        "label": "Email",
+        "type": "text",
+        "default": "",
+        "translatable": false
+      },
+      "image": {
+        "label": "Photo of the building",
+        "type": "image",
+        "default": ""
+      },
+      "alt": {
+        "label": "Photo description",
+        "type": "text",
+        "default": ""
+      }
+    },
+    "category": "Info",
+    "example": {
+      "address": "120 Elm Street\nSpringfield",
+      "directions": {
+        "label": "Get directions",
+        "href": "https://maps.google.com/?q=120+Elm+Street"
+      },
+      "hours": [
+        {
+          "days": "Office · Mon – Thu",
+          "hours": "9:00 – 16:00"
+        }
+      ],
+      "phone": "(555) 010-2030",
+      "email": "hello@example.org"
+    }
+  },
+  "example": {
+    "variant": "split",
+    "data": {
+      "address": "120 Elm Street\nSpringfield",
+      "directions": {
+        "label": "Get directions",
+        "href": "https://maps.google.com/?q=120+Elm+Street"
+      },
+      "hours": [
+        {
+          "days": "Office · Mon – Thu",
+          "hours": "9:00 – 16:00"
+        }
+      ],
+      "phone": "(555) 010-2030",
+      "email": "hello@example.org"
+    }
+  }
+}

package/section-library/cta-band/CtaBand.astro

@@ -0,0 +1,28 @@
+---
+import type { SectionProps, LinkValue } from '@acms-subir/core/theme';
+interface Data { heading: string; text: string; primary: LinkValue; secondary: LinkValue }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const buttons = [data.primary, data.secondary].filter((b) => b?.label && b.href);
+---
+<div class:list={['cta', `is-${variant}`]}>
+  <div class="cta-copy">
+    <h2>{data.heading}</h2>
+    {data.text && <p>{data.text}</p>}
+  </div>
+  {buttons.length > 0 && (
+    <div class="cta-actions">
+      {buttons.map((b, i) => <a class:list={['w-btn', i === 0 ? 'primary' : 'outline']} href={b.href}>{b.label}</a>)}
+    </div>
+  )}
+</div>
+<style>
+  .cta { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; padding: clamp(1.75rem, 5vw, 3rem); border-radius: var(--r-lg); }
+  .cta.is-accent { background: var(--accent); color: var(--btn-ink, #fff); }
+  .cta.is-quiet { background: var(--soft); }
+  .cta-copy { max-width: 40rem; }
+  .cta h2 { margin: 0; }
+  .cta p { margin: 0.5rem 0 0; opacity: 0.85; }
+  .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+  .cta.is-accent :global(.w-btn.primary) { background: var(--bg); color: var(--ink); }
+  .cta.is-accent :global(.w-btn.outline) { background: transparent; color: inherit; border-color: currentColor; }
+</style>

package/section-library/cta-band/section.json

@@ -0,0 +1,51 @@
+{
+  "type": "cta-band",
+  "definition": {
+    "name": "Call-to-action band",
+    "version": 1,
+    "component": "sections/CtaBand.astro",
+    "description": "A bold band that asks people to do one thing.",
+    "variants": [
+      "accent",
+      "quiet"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "New here?"
+      },
+      "text": {
+        "label": "Text",
+        "type": "textarea",
+        "default": ""
+      },
+      "primary": {
+        "label": "Main button",
+        "type": "link"
+      },
+      "secondary": {
+        "label": "Second button",
+        "type": "link"
+      }
+    },
+    "category": "Calls to action",
+    "example": {
+      "text": "We’d love to meet you. Tell us you’re coming and we’ll save you a seat.",
+      "primary": {
+        "label": "Plan a visit",
+        "href": "/visit"
+      }
+    }
+  },
+  "example": {
+    "variant": "accent",
+    "data": {
+      "text": "We’d love to meet you. Tell us you’re coming and we’ll save you a seat.",
+      "primary": {
+        "label": "Plan a visit",
+        "href": "/visit"
+      }
+    }
+  }
+}

package/section-library/feature-grid/FeatureGrid.astro

@@ -0,0 +1,54 @@
+---
+import type { SectionProps, LinkValue } from '@acms-subir/core/theme';
+interface Item { icon: string; title: string; text: string; link: LinkValue }
+interface Data { heading: string; intro: string; items: Item[] }
+const { data, variant } = Astro.props as SectionProps<Data>;
+// 24px stroked paths; add your own here
+const ICONS: Record<string, string> = {
+  heart: 'M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z',
+  users: 'M16 20v-1.5a3.5 3.5 0 0 0-3.5-3.5h-5A3.5 3.5 0 0 0 4 18.5V20M10 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM20 20v-1.5a3.5 3.5 0 0 0-2.5-3.35M15.5 4.15a3.5 3.5 0 0 1 0 6.7',
+  calendar: 'M4 6h16v14H4zM4 10h16M8 3v4M16 3v4',
+  'map-pin': 'M12 21s-6-5.4-6-11a6 6 0 0 1 12 0c0 5.6-6 11-6 11zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
+  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
+  book: 'M5 4h9a4 4 0 0 1 4 4v12H9a4 4 0 0 1-4-4zM5 16a4 4 0 0 1 4-4h9',
+  music: 'M9 18V6l11-2v12M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM20 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z',
+  coffee: 'M4 9h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6zM17 11h1.5a2.5 2.5 0 0 1 0 5H17M8 3v3M12 3v3',
+  star: 'M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z',
+  check: 'M4 12.5l5 5L20 6.5',
+};
+const items = data.items.filter((i) => i.title || i.text);
+---
+<div class:list={['feat', `is-${variant}`]}>
+  {(data.heading || data.intro) && (
+    <header class="feat-head">
+      {data.heading && <h2>{data.heading}</h2>}
+      {data.intro && <p>{data.intro}</p>}
+    </header>
+  )}
+  <ul class="feat-list">
+    {items.map((item) => (
+      <li class="feat-item">
+        {ICONS[item.icon] && <svg class="feat-icon" viewBox="0 0 24 24" aria-hidden="true"><path d={ICONS[item.icon]} /></svg>}
+        <h3>{item.link?.href ? <a href={item.link.href}>{item.title}</a> : item.title}</h3>
+        {item.text && <p>{item.text}</p>}
+        {item.link?.href && item.link.label && <a class="feat-link" href={item.link.href}>{item.link.label} →</a>}
+      </li>
+    ))}
+  </ul>
+</div>
+<style>
+  .feat-head { margin-bottom: 1.75rem; }
+  .feat-head h2 { margin: 0; }
+  .feat-head p { margin: 0.5rem 0 0; color: var(--muted); max-width: 60ch; }
+  .feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .is-two-up .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .feat-item { display: flex; flex-direction: column; gap: 0.4rem; }
+  .feat-icon { width: 2.5rem; height: 2.5rem; padding: 0.55rem; margin-bottom: 0.35rem; border-radius: var(--r-sm); background: var(--soft); color: var(--accent-text, var(--accent)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+  .feat-item h3 { margin: 0; font-size: 1.15rem; }
+  .feat-item h3 a { color: inherit; text-decoration: none; }
+  .feat-item h3 a:hover { text-decoration: underline; }
+  .feat-item p { margin: 0; color: var(--muted); }
+  .feat-link { margin-top: 0.25rem; font-weight: 600; font-size: 0.95rem; color: var(--accent-text, var(--accent)); text-decoration: none; }
+  @media (max-width: 860px) { .feat-list, .is-two-up .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @media (max-width: 560px) { .feat-list, .is-two-up .feat-list { grid-template-columns: 1fr; } }
+</style>

package/section-library/feature-grid/section.json

@@ -0,0 +1,107 @@
+{
+  "type": "feature-grid",
+  "definition": {
+    "name": "Feature grid",
+    "version": 1,
+    "component": "sections/FeatureGrid.astro",
+    "description": "Short points with an icon: ministries, services, reasons to visit.",
+    "variants": [
+      "three-up",
+      "two-up"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": ""
+      },
+      "intro": {
+        "label": "Intro",
+        "type": "textarea",
+        "default": ""
+      },
+      "items": {
+        "label": "Items",
+        "type": "list",
+        "itemLabel": "title",
+        "max": 12,
+        "fields": {
+          "icon": {
+            "label": "Icon",
+            "type": "select",
+            "options": [
+              "none",
+              "heart",
+              "users",
+              "calendar",
+              "map-pin",
+              "clock",
+              "book",
+              "music",
+              "coffee",
+              "star",
+              "check"
+            ],
+            "default": "none"
+          },
+          "title": {
+            "label": "Title",
+            "type": "text"
+          },
+          "text": {
+            "label": "Description",
+            "type": "textarea"
+          },
+          "link": {
+            "label": "Link",
+            "type": "link"
+          }
+        }
+      }
+    },
+    "category": "Info",
+    "example": {
+      "heading": "Find your place",
+      "items": [
+        {
+          "icon": "users",
+          "title": "Small groups",
+          "text": "Meet in homes across the city during the week."
+        },
+        {
+          "icon": "heart",
+          "title": "Serve",
+          "text": "Food bank, kids’ ministry and the welcome team."
+        },
+        {
+          "icon": "music",
+          "title": "Worship team",
+          "text": "Musicians and singers of every level."
+        }
+      ]
+    }
+  },
+  "example": {
+    "variant": "three-up",
+    "data": {
+      "heading": "Find your place",
+      "items": [
+        {
+          "icon": "users",
+          "title": "Small groups",
+          "text": "Meet in homes across the city during the week."
+        },
+        {
+          "icon": "heart",
+          "title": "Serve",
+          "text": "Food bank, kids’ ministry and the welcome team."
+        },
+        {
+          "icon": "music",
+          "title": "Worship team",
+          "text": "Musicians and singers of every level."
+        }
+      ]
+    }
+  }
+}

package/section-library/gallery/Gallery.astro

@@ -0,0 +1,29 @@
+---
+import type { SectionProps } from '@acms-subir/core/theme';
+interface Photo { image: string; imageFocus: string; alt: string; caption: string }
+interface Data { heading: string; images: Photo[] }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const photos = data.images.filter((p) => p.image);
+---
+<div class:list={['gal', `is-${variant}`]}>
+  {data.heading && <h2>{data.heading}</h2>}
+  <ul class="gal-list">
+    {photos.map((p) => (
+      <li>
+        <figure>
+          <img src={p.image} alt={p.alt} loading="lazy" style={`object-position:${p.imageFocus}`} />
+          {p.caption && <figcaption>{p.caption}</figcaption>}
+        </figure>
+      </li>
+    ))}
+  </ul>
+</div>
+<style>
+  .gal h2 { margin: 0 0 1.25rem; }
+  .gal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
+  .is-strip .gal-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
+  .is-strip .gal-list > li { flex: 0 0 min(80%, 22rem); scroll-snap-align: start; }
+  figure { margin: 0; }
+  img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--soft); display: block; }
+  figcaption { margin-top: 0.4rem; font-size: 0.88rem; color: var(--muted); }
+</style>

package/section-library/gallery/section.json

@@ -0,0 +1,51 @@
+{
+  "type": "gallery",
+  "definition": {
+    "name": "Gallery",
+    "version": 1,
+    "component": "sections/Gallery.astro",
+    "description": "A grid or strip of photos with optional captions.",
+    "variants": [
+      "grid",
+      "strip"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": ""
+      },
+      "images": {
+        "label": "Photos",
+        "type": "list",
+        "itemLabel": "caption",
+        "max": 30,
+        "fields": {
+          "image": {
+            "label": "Photo",
+            "type": "image"
+          },
+          "alt": {
+            "label": "Description",
+            "type": "text",
+            "help": "What’s in the photo, for screen readers."
+          },
+          "caption": {
+            "label": "Caption",
+            "type": "text"
+          }
+        }
+      }
+    },
+    "category": "Media",
+    "example": {
+      "images": []
+    }
+  },
+  "example": {
+    "variant": "grid",
+    "data": {
+      "images": []
+    }
+  }
+}

package/section-library/hero-banner/HeroBanner.astro

@@ -0,0 +1,42 @@
+---
+import type { SectionProps, LinkValue } from '@acms-subir/core/theme';
+interface Data { eyebrow: string; heading: string; text: string; primary: LinkValue; secondary: LinkValue; image: string; imageFocus: string; alt: string }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const buttons = [data.primary, data.secondary].filter((b) => b?.label && b.href);
+---
+<div class:list={['hero', `is-${variant}`, { 'has-image': data.image }]} style={variant === 'cover' && data.image ? `--hero-img:url("${data.image}");--hero-focus:${data.imageFocus}` : undefined}>
+  <div class="hero-copy">
+    {data.eyebrow && <p class="hero-eyebrow">{data.eyebrow}</p>}
+    <h1 class="hero-title">{data.heading}</h1>
+    {data.text && <p class="hero-text">{data.text}</p>}
+    {buttons.length > 0 && (
+      <div class="hero-actions">
+        {buttons.map((b, i) => <a class:list={['w-btn', i === 0 ? 'primary' : 'outline']} href={b.href} rel={b.external ? 'noopener' : undefined}>{b.label}</a>)}
+      </div>
+    )}
+  </div>
+  {variant === 'split' && data.image && <img class="hero-media" src={data.image} alt={data.alt} loading="eager" style={`object-position:${data.imageFocus}`} />}
+</div>
+<style>
+  .hero { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
+  .hero.is-split.has-image { grid-template-columns: 1.1fr 1fr; }
+  .hero.is-centered, .hero.is-cover { text-align: center; justify-items: center; }
+  .hero.is-cover {
+    padding: clamp(3rem, 10vw, 7rem) clamp(1.25rem, 5vw, 4rem); border-radius: var(--r-lg);
+    background: var(--soft); color: var(--ink);
+  }
+  .hero.is-cover.has-image {
+    background: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.55)), var(--hero-img) var(--hero-focus, center) / cover no-repeat;
+    color: #fff;
+  }
+  .hero-copy { max-width: 42rem; }
+  .hero-eyebrow { margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
+  .hero.is-cover.has-image .hero-eyebrow { color: inherit; opacity: 0.85; }
+  .hero-title { margin: 0; font-family: var(--font-heading); font-weight: var(--display-weight, 700); font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; }
+  .hero-text { margin: 1rem 0 0; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); white-space: pre-line; }
+  .hero.is-cover.has-image .hero-text { color: inherit; opacity: 0.85; }
+  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
+  .hero.is-centered .hero-actions, .hero.is-cover .hero-actions { justify-content: center; }
+  .hero-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
+  @media (max-width: 760px) { .hero.is-split.has-image { grid-template-columns: 1fr; } }
+</style>

package/section-library/hero-banner/section.json

@@ -0,0 +1,81 @@
+{
+  "type": "hero-banner",
+  "definition": {
+    "name": "Hero banner",
+    "version": 1,
+    "component": "sections/HeroBanner.astro",
+    "description": "Big opening statement with up to two buttons and an optional image.",
+    "variants": [
+      "split",
+      "centered",
+      "cover"
+    ],
+    "fields": {
+      "eyebrow": {
+        "label": "Small line above the heading",
+        "type": "text",
+        "default": ""
+      },
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Welcome home."
+      },
+      "text": {
+        "label": "Supporting text",
+        "type": "textarea",
+        "default": ""
+      },
+      "primary": {
+        "label": "Main button",
+        "type": "link"
+      },
+      "secondary": {
+        "label": "Second button",
+        "type": "link"
+      },
+      "image": {
+        "label": "Image",
+        "type": "image",
+        "default": ""
+      },
+      "alt": {
+        "label": "Image description",
+        "type": "text",
+        "default": "",
+        "help": "Describe the image for people using screen readers."
+      }
+    },
+    "category": "Intro",
+    "example": {
+      "eyebrow": "Sundays at 10:00",
+      "heading": "A church for the whole city.",
+      "text": "Come as you are. Coffee is on from 9:30.",
+      "primary": {
+        "label": "Plan a visit",
+        "href": "/visit"
+      },
+      "secondary": {
+        "label": "Watch online",
+        "href": "/live"
+      }
+    },
+    "limit": 1
+  },
+  "example": {
+    "variant": "cover",
+    "data": {
+      "eyebrow": "Sundays at 10:00",
+      "heading": "A church for the whole city.",
+      "text": "Come as you are. Coffee is on from 9:30.",
+      "primary": {
+        "label": "Plan a visit",
+        "href": "/visit"
+      },
+      "secondary": {
+        "label": "Watch online",
+        "href": "/live"
+      }
+    }
+  }
+}

package/section-library/latest-posts/LatestPosts.astro

@@ -0,0 +1,22 @@
+---
+import type { SectionProps, PostItem, LinkValue } from '@acms-subir/core/theme';
+import PostCard from '@acms-subir/core/theme/components/PostCard.astro';
+interface Data { heading: string; posts: PostItem[]; more: LinkValue }
+const { data, variant } = Astro.props as SectionProps<Data>;
+---
+<div class="latest">
+  <header class="latest-head">
+    <h2>{data.heading}</h2>
+    {data.more?.label && data.more.href && <a href={data.more.href}>{data.more.label} →</a>}
+  </header>
+  <div class:list={['latest-list', `is-${variant}`]}>
+    {data.posts.map((p) => <PostCard variant={variant === 'list' ? 'row' : 'card'} href={p.url} title={p.title} excerpt={p.excerpt} cover={p.image} coverAlt={p.imageAlt} />)}
+  </div>
+</div>
+<style>
+  .latest-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; margin-bottom: 1.25rem; }
+  .latest-head h2 { margin: 0; }
+  .latest-head a { font-weight: 600; color: var(--accent-text, var(--accent)); text-decoration: none; }
+  .latest-list.is-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+  .latest-list.is-list { display: grid; gap: 0.5rem; }
+</style>

package/section-library/latest-posts/section.json

@@ -0,0 +1,37 @@
+{
+  "type": "latest-posts",
+  "definition": {
+    "name": "Latest posts",
+    "version": 1,
+    "component": "sections/LatestPosts.astro",
+    "description": "Recent posts from a collection or tag. Updates on its own.",
+    "variants": [
+      "cards",
+      "list"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Latest"
+      },
+      "posts": {
+        "label": "Posts",
+        "type": "source",
+        "source": "posts",
+        "default": {
+          "limit": 3
+        }
+      },
+      "more": {
+        "label": "“See all” link",
+        "type": "link"
+      }
+    },
+    "category": "Posts & news"
+  },
+  "example": {
+    "variant": "cards",
+    "data": {}
+  }
+}

package/section-library/pricing/Pricing.astro

@@ -0,0 +1,40 @@
+---
+import type { SectionProps, LinkValue } from '@acms-subir/core/theme';
+interface Plan { name: string; price: string; period: string; description: string; features: string; cta: LinkValue; featured: boolean }
+interface Data { heading: string; intro: string; plans: Plan[] }
+const { data } = Astro.props as SectionProps<Data>;
+const plans = data.plans.filter((p) => p.name);
+---
+<div class="price">
+  <header class="price-head">
+    <h2>{data.heading}</h2>
+    {data.intro && <p>{data.intro}</p>}
+  </header>
+  <ul class="price-list">
+    {plans.map((p) => (
+      <li class:list={['price-plan', { 'is-featured': p.featured }]}>
+        <b class="price-name">{p.name}</b>
+        {p.price && <span class="price-amount">{p.price}{p.period && <small> / {p.period}</small>}</span>}
+        {p.description && <p class="price-desc">{p.description}</p>}
+        {p.features && <ul class="price-features">{p.features.split('\n').map((f) => f.trim()).filter(Boolean).map((f) => <li>{f}</li>)}</ul>}
+        {p.cta?.label && p.cta.href && <a class:list={['w-btn', p.featured ? 'primary' : 'outline']} href={p.cta.href}>{p.cta.label}</a>}
+      </li>
+    ))}
+  </ul>
+</div>
+<style>
+  .price-head { text-align: center; max-width: 40rem; margin: 0 auto; }
+  .price-head h2 { margin: 0; }
+  .price-head p { margin: 0.5rem 0 0; color: var(--muted); }
+  .price-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: stretch; }
+  .price-plan { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
+  .price-plan.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--sh-2); }
+  .price-name { font-size: 1rem; }
+  .price-amount { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.1; }
+  .price-amount small { font-family: var(--font-body); font-size: 0.95rem; color: var(--muted); }
+  .price-desc { margin: 0; color: var(--muted); }
+  .price-features { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; flex: 1; }
+  .price-features li { display: flex; gap: 0.5rem; font-size: 0.95rem; }
+  .price-features li::before { content: '✓'; color: var(--accent-text, var(--accent)); font-weight: 700; }
+  .price-plan .w-btn { align-self: flex-start; }
+</style>