Skip to content

← Marketing examples

Pricing

22 examples. Use Compact to see how the same HTML reflows.

Three plans with an outlined featured card

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="pricing" data-treatment="featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-01-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-01-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three connected plan cards

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="pricing" data-treatment="panel featured compact">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-02-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-02-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three lightly tinted price cards

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Fieldwork Studio

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="pricing" data-treatment="label">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-03-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Fieldwork Studio</p>
    <h3 class="marketing-display" id="marketing-pricing-03-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Monthly and yearly plan chooser

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width
Billing period

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month$120 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month$290 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="pricing" data-treatment="billing featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-04-headline"><fieldset class="marketing-billing thin-cluster"><legend>Billing period</legend>
    <label><input type="radio" name="marketing-pricing-04-billing" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="marketing-pricing-04-billing" value="yearly"> Yearly</label>
  </fieldset><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-04-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span><span class="marketing-yearly">$0 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span><span class="marketing-yearly">$120 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span><span class="marketing-yearly">$290 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Two illustrated membership cards

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width
Billing period

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month$120 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="rose" data-category="pricing" data-treatment="art billing">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-05-headline"><fieldset class="marketing-billing thin-cluster"><legend>Billing period</legend>
    <label><input type="radio" name="marketing-pricing-05-billing" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="marketing-pricing-05-billing" value="yearly"> Yearly</label>
  </fieldset><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-05-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><span class="marketing-mark" aria-hidden="true">✦</span><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span><span class="marketing-yearly">$0 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><span class="marketing-mark" aria-hidden="true">✦</span><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span><span class="marketing-yearly">$120 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three plans with actions above inclusions

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

Read the plan guide
  • Public editions
  • Reading archive
  • Unlimited editions

Studio

$29 USD per month

Read the plan guide
  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="pricing" data-treatment="plain links">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-07-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-07-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a>
<ul><li>Public editions</li><li>Reading archive</li></ul></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul></article></div></div></section>
  </div>
</div>

Three illustrated plans with a featured panel

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="pricing" data-treatment="art featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-08-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-08-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><span class="marketing-mark" aria-hidden="true">✦</span><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><span class="marketing-mark" aria-hidden="true">✦</span><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><span class="marketing-mark" aria-hidden="true">✦</span><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Four plans with a billing switch

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width
Billing period

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month$120 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month$290 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide

Collective

$49 USD per month$490 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
  • Team access
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="pricing" data-treatment="billing featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-09-headline"><fieldset class="marketing-billing thin-cluster"><legend>Billing period</legend>
    <label><input type="radio" name="marketing-pricing-09-billing" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="marketing-pricing-09-billing" value="yearly"> Yearly</label>
  </fieldset><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-09-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span><span class="marketing-yearly">$0 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span><span class="marketing-yearly">$120 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span><span class="marketing-yearly">$290 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Collective</h4></div>
<p class="thin-price"><span class="marketing-monthly">$49 <small>USD per month</small></span><span class="marketing-yearly">$490 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li><li>Team access</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Single dark membership offer

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample membership

Compare prices, billing periods, and what each plan includes.

View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="pricing" data-treatment="accent compact">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-10-headline"><div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-10-headline">Sample membership</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Outline cards with price near the action

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

  • Public editions
  • Reading archive
  • Unlimited editions

$12 USD per month

Read the plan guide

Studio

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review

$29 USD per month

Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="pricing" data-treatment="accent legal">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-11-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-11-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Two dark plans with colored rules

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="pricing" data-treatment="accent">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-12-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-12-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Stacked subscriptions with price beside inclusions

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="pricing" data-treatment="panel accent">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-13-headline"><div class="marketing-composition" data-composition="stack"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-13-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three plans with distinct top rules

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="pricing" data-treatment="accent plain">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-14-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-14-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Quiet pricing grid and highlighted signup

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Fieldwork Studio

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="pricing" data-treatment="featured pill">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-15-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Fieldwork Studio</p>
    <h3 class="marketing-display" id="marketing-pricing-15-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three tinted and outlined plan cards

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="mint" data-category="pricing" data-treatment="accent tiles">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-16-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-16-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Monthly and yearly cards side by side

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Yearly

Featured plan

$120 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="pricing" data-treatment="annual featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-17-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-17-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Monthly</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Yearly</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$120 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three violet plans with prices near the actions

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan
  • Public editions
  • Reading archive
  • Unlimited editions

$12 USD per month

Read the plan guide

Studio

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review

$29 USD per month

Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="pricing" data-treatment="legal featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-18-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-18-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Two dark plans with a violet feature card

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="pricing" data-treatment="featured accent">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-19-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-19-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Three dark tiers with a featured plan

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan
  • Public editions
  • Reading archive
  • Unlimited editions

$12 USD per month

Read the plan guide

Studio

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review

$29 USD per month

Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="pricing" data-treatment="featured legal">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-20-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-20-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Trial introduction beside two price cards

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Fieldwork Studio

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="pricing" data-treatment="featured label">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-21-headline"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Fieldwork Studio</p>
    <h3 class="marketing-display" id="marketing-pricing-21-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Color panel beside a two-plan chooser

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width
Billing period

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

Featured plan

$12 USD per month$120 USD per year

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="pricing" data-treatment="billing featured">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-22-headline"><fieldset class="marketing-billing thin-cluster"><legend>Billing period</legend>
    <label><input type="radio" name="marketing-pricing-22-billing" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="marketing-pricing-22-billing" value="yearly"> Yearly</label>
  </fieldset><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-22-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span><span class="marketing-yearly">$0 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card" data-featured><div class="marketing-plan-title"><h4>Independent publisher</h4><small>Featured plan</small></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span><span class="marketing-yearly">$120 <small>USD per year</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button">Read the plan guide</a></article></div></div></section>
  </div>
</div>

Four tinted course membership cards

Content-sized rows align comparable plan details with subgrid, with a one-column layout in tight spaces.

Preview width

Sample publishing plans

Compare prices, billing periods, and what each plan includes.

Independent publisher

$12 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
Read the plan guide

Studio

$29 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
Read the plan guide

Collective

$49 USD per month

  • Public editions
  • Reading archive
  • Unlimited editions
  • Editorial review
  • Team access
Read the plan guide
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="pricing" data-treatment="tiles accent">
  <div class="marketing-section">
    <section class="marketing-offers thin-stack" aria-labelledby="marketing-pricing-23-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-pricing-23-headline">Sample publishing plans</h3>
    <p>Compare prices, billing periods, and what each plan includes.</p>
    
  </div><div class="thin-pricing" data-align="rows"><article class="thin-price-card"><div class="marketing-plan-title"><h4>Reader</h4></div>
<p class="thin-price"><span class="marketing-monthly">$0 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Independent publisher</h4></div>
<p class="thin-price"><span class="marketing-monthly">$12 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Studio</h4></div>
<p class="thin-price"><span class="marketing-monthly">$29 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article>
<article class="thin-price-card"><div class="marketing-plan-title"><h4>Collective</h4></div>
<p class="thin-price"><span class="marketing-monthly">$49 <small>USD per month</small></span></p>
<ul><li>Public editions</li><li>Reading archive</li><li>Unlimited editions</li><li>Editorial review</li><li>Team access</li></ul>
<a href="/guides/marketing-site/" class="thin-button" data-variant="secondary">Read the plan guide</a></article></div></div></section>
  </div>
</div>
View shared CSS

Load Thin-Sky’s Foundation, Themes, Layouts, Components, and Marketing styles with these rules. Adapt the media, links, and form actions to your site.

@layer thin-patterns {
  .marketing-specimen {
    container: marketing-specimen / inline-size;
    color: var(--thin-color-text);
    background: var(--thin-color-surface);
  }

  .marketing-specimen[data-tone="sky"] { --thin-color-surface: oklch(96% .022 231); }
  .marketing-specimen[data-tone="mint"] { --thin-color-surface: oklch(96% .035 155); }
  .marketing-specimen[data-tone="rose"] { --thin-color-surface: oklch(96% .035 18); }
  .marketing-specimen[data-tone="amber"] { --thin-color-surface: oklch(96% .06 91); }
  .marketing-specimen[data-tone="blue"] { --thin-color-surface: oklch(39% .15 257); }
  .marketing-specimen[data-tone="violet"] { --thin-color-surface: oklch(35% .16 290); }
  .marketing-specimen[data-tone="gradient"] { background: linear-gradient(125deg, oklch(33% .13 272), oklch(37% .125 326)); }

  .marketing-specimen[data-treatment~="accent"]:not([data-tone="gradient"]) {
    background: radial-gradient(ellipse at 92% 88%, color-mix(in oklch, var(--thin-color-accent) 19%, transparent), transparent 60%), var(--thin-color-surface);
  }

  .marketing-section {
    --marketing-inset: clamp(var(--thin-space-m), 5cqi, 4rem);
    --marketing-gap: clamp(var(--thin-space-m), 4cqi, 3rem);
    display: grid;
    gap: var(--marketing-gap);
    padding-block: clamp(var(--thin-space-l), 5cqi, 4rem);
    padding-inline: var(--marketing-inset);
    overflow-wrap: anywhere;
  }

  .marketing-section > *,
  .marketing-composition > *,
  .marketing-nav > *,
  .marketing-card,
  .marketing-board,
  .marketing-section .thin-price-card {
    min-inline-size: 0;
  }

  .marketing-specimen[data-category="navigations"] .marketing-section,
  .marketing-specimen[data-treatment~="compact"]:not([data-category="headers"], [data-category="blog"]) .marketing-section {
    padding-block: var(--thin-space-m);
  }

  .marketing-section :where(ul[role="list"], dl) { margin-block: 0; }
  .marketing-section :where(a.thin-button, button) { max-inline-size: 100%; }

  .marketing-composition {
    display: grid;
    gap: var(--marketing-gap);
  }

  .marketing-composition:is([data-composition="split"], [data-composition="media-first"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    align-items: center;
  }

  .marketing-composition[data-composition="band"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .marketing-composition[data-composition="band"] > .marketing-intro {
    flex: 1 1 17rem;
  }

  .marketing-composition[data-composition="center"] > .marketing-intro,
  .marketing-composition[data-composition="showcase"] > .marketing-intro {
    align-items: center;
    justify-self: center;
    text-align: center;
  }

  .marketing-composition:is([data-composition="center"], [data-composition="showcase"]) > .marketing-intro .marketing-actions {
    justify-content: center;
  }

  .marketing-composition[data-composition="editorial"] > .marketing-intro {
    inline-size: min(100%, 62ch);
  }

  .marketing-intro {
    inline-size: min(100%, 62ch);
  }

  .marketing-display {
    max-inline-size: 23ch;
    font-size: clamp(1.55rem, 1.05rem + 3.4cqi, 4rem);
    line-height: 1.07;
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  .marketing-display em {
    color: var(--thin-color-accent);
    font-style: normal;
  }

  .marketing-specimen[data-treatment~="light"] .marketing-display { font-weight: 430; }
  .marketing-specimen[data-treatment~="uppercase"] :is(.marketing-display, .marketing-nav nav) { text-transform: uppercase; }
  .marketing-specimen[data-treatment~="pill"] .thin-button { border-radius: 2em; }

  .marketing-intro > p:not(.marketing-kicker) { max-inline-size: 54ch; }
  .marketing-kicker { color: var(--thin-color-accent); font-size: .9em; font-weight: 700; }
  .marketing-specimen[data-treatment~="pill"] .marketing-kicker { padding: .25em .8em; border: 1px solid currentColor; border-radius: 2em; inline-size: fit-content; }

  .marketing-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--thin-space-xs) var(--thin-space-m);
  }

  .marketing-nav[data-nav="start"] > nav { flex: 1 1 auto; }
  .marketing-nav[data-nav="band"] > nav { margin-inline-start: auto; }
  .marketing-nav[data-nav="wordmark"] { justify-content: center; }

  .marketing-nav > nav a,
  .marketing-nav-actions > a:not(.thin-button) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--thin-density-control);
  }

  .marketing-brand {
    color: var(--thin-color-text);
    font-size: 1.25em;
    font-weight: 780;
    text-decoration: none;
  }

  .marketing-stage,
  .marketing-launch,
  .marketing-cta,
  .marketing-foot {
    display: grid;
    gap: var(--marketing-gap);
  }

  .marketing-stage {
    position: relative;
    isolation: isolate;
  }

  .marketing-stage .marketing-nav {
    padding-block-end: var(--thin-space-s);
    border-block-end: 1px solid var(--thin-color-border);
  }

  .marketing-stage:has(.marketing-backdrop) {
    border-radius: var(--thin-radius-m);
    padding: var(--marketing-inset);
    overflow: clip;
  }

  .marketing-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    background: oklch(24% .04 258);
  }

  .marketing-backdrop img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: .23;
  }

  .marketing-panel {
    padding: var(--marketing-inset);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  .marketing-notice {
    justify-content: center;
    padding: var(--thin-space-xs) var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-s);
    background: var(--thin-color-surface-raised);
  }

  .marketing-notice a { padding-block: var(--thin-space-2xs); }
  .marketing-notice-inset { max-inline-size: 62ch; margin-inline: auto; }

  .marketing-travel { display: grid; gap: var(--marketing-gap); align-items: center; }

  @container marketing-specimen (inline-size >= 52rem) {
    .marketing-travel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .marketing-travel > figure { grid-column: 1 / 5; grid-row: 1; }
    .marketing-travel > .marketing-panel { grid-column: 4 / -1; grid-row: 1; }
  }

  .marketing-image :is(img, video) {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--thin-radius-m);
  }

  .marketing-image:only-child { inline-size: min(100%, 55rem); }
  .marketing-composition[data-composition="showcase"] > .marketing-image { inline-size: min(100%, 56rem); justify-self: center; }

  .marketing-collage {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--thin-space-xs);
  }

  .marketing-collage img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    object-fit: cover;
    border-radius: var(--thin-radius-s);
  }

  .marketing-collage img:first-child { grid-row: span 2; }

  .marketing-art {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 6%;
    min-block-size: clamp(6rem, 25cqi, 16rem);
    padding: 10%;
    border-radius: var(--thin-radius-m);
    background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
  }

  .marketing-art i {
    inline-size: 100%;
    aspect-ratio: 1;
    border: .2rem solid currentColor;
    border-radius: 50% 50% 12% 50%;
    color: var(--thin-color-accent);
    background: color-mix(in oklch, currentColor 18%, transparent);
  }

  .marketing-art i:nth-child(2) { border-radius: 16%; translate: 0 -18%; }
  .marketing-art i:nth-child(3) { border-radius: 50%; translate: 0 18%; }

  .marketing-board {
    padding: var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-block-start-width: .75rem;
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  .marketing-device { border-width: .65rem; }
  .marketing-board figcaption { margin: 0; font-weight: 700; }
  .marketing-board .thin-box { background: var(--thin-color-surface); }
  .marketing-code > figcaption { margin-block-end: var(--thin-space-xs); }
  .marketing-code pre { margin-block: 0; }

  .marketing-marks {
    align-items: stretch;
    text-align: center;
  }

  .marketing-marks > li {
    display: grid;
    place-items: center;
    min-block-size: 3rem;
    padding: var(--thin-space-xs);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-s);
    font-family: var(--thin-font-display);
  }

  [data-treatment~="plain"] .marketing-marks > li { border-color: transparent; }
  [data-treatment~="tiles"] .marketing-marks > li { background: var(--thin-color-surface-raised); }
  .marketing-service-mark { font-weight: 750; }

  .marketing-metrics dd { margin: 0; color: var(--thin-color-accent); font-size: var(--thin-text-1); font-weight: 720; }

  .marketing-form {
    inline-size: min(100%, 36rem);
    text-align: start;
  }

  .marketing-form p { font-size: .9em; }
  .marketing-form-fields {
    display: grid;
    gap: var(--thin-space-xs);
    align-items: end;
  }

  .marketing-form-fields > * { min-inline-size: 0; }

  :is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields {
    display: flex;
    flex-wrap: wrap;
  }

  :is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields > :is(.thin-field, input) {
    flex: 1 1 12rem;
    inline-size: auto;
  }

  .marketing-search { inline-size: min(100%, 40rem); text-align: start; }

  .marketing-collection > * { min-inline-size: 0; }
  .marketing-card {
    block-size: 100%;
    padding: var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  [data-treatment~="plain"] .marketing-card {
    border-color: transparent;
    background: transparent;
  }

  [data-treatment~="accent"] .marketing-card { border-block-start: .25rem solid var(--thin-color-accent); }

  .marketing-card > img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--thin-radius-s);
  }

  .marketing-mark,
  .marketing-person-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2.6em;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--thin-color-accent);
    background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
    font-weight: 750;
  }

  .marketing-member { display: grid; align-content: start; gap: var(--thin-space-s); }
  .marketing-member > img { aspect-ratio: 1; }
  [data-treatment~="compact"] .marketing-member { grid-template-columns: auto minmax(0, 1fr); }

  .marketing-quotation { max-inline-size: 62ch; }
  [data-composition="center"] > .marketing-quotation { text-align: center; justify-self: center; }
  [data-composition="center"] > .marketing-quotation .marketing-attribution { justify-content: center; }
  .marketing-quotation blockquote { border: 0; padding: 0; color: var(--thin-color-text); font-size: var(--thin-text-1); }
  .marketing-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--thin-space-xs); }

  .marketing-questions { inline-size: 100%; text-align: start; }
  .marketing-questions[data-questions="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
  }

  .marketing-answers { display: grid; gap: var(--thin-space-s); }
  .marketing-questions details > p { margin-block-start: var(--thin-space-xs); }
  [data-treatment~="plain"] .marketing-questions details { background: transparent; }
  [data-treatment~="accent"] .marketing-questions details { border-inline: 0; border-block-start: 0; border-radius: 0; }

  .marketing-offers { min-inline-size: 0; }
  .marketing-offers fieldset { justify-self: start; }
  .marketing-yearly { display: none; }
  .marketing-offers:has(input[value="yearly"]:checked) .marketing-monthly { display: none; }
  .marketing-offers:has(input[value="yearly"]:checked) .marketing-yearly { display: inline; }
  .marketing-offers .thin-price small { font-size: .55em; }
  .marketing-plan-title small { color: var(--thin-color-accent); font-weight: 700; }
  .marketing-offers [data-composition="stack"] .thin-pricing { grid-template-columns: minmax(0, 1fr); }
  [data-treatment~="accent"] .marketing-offers .thin-price-card { border-block-start: .3rem solid var(--thin-color-accent); }

  .marketing-foot [data-composition="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .marketing-foot [data-composition="center"] {
    justify-items: center;
    text-align: center;
  }

  .marketing-foot nav > ul { margin-block-start: var(--thin-space-xs); }
  .marketing-foot [data-composition="grid"] nav > ul { display: grid; }
  .marketing-foot > small { border-block-start: 1px solid var(--thin-color-border); padding-block-start: var(--thin-space-s); }

  @container marketing-specimen (inline-size >= 46rem) {
    .marketing-stories > [data-lead] { grid-column: span 2; }
    .marketing-nav[data-nav="brand-middle"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .marketing-nav[data-nav="brand-middle"] .marketing-nav-actions { justify-self: end; }
  }

  @media (forced-colors: active) {
    .marketing-backdrop { display: none; }
    .marketing-specimen, .marketing-card, .marketing-panel { background: Canvas; color: CanvasText; }
    .marketing-kicker, .marketing-display em { color: CanvasText; }
  }
}