/* The pages per kind of business (/websites/ and /websites/<type>/, 5 Nov 2026), built by nichePage() and
   nicheOverview() in build-pages.cjs. They reuse the inner pages' opening, headings, questions and terms
   (packages.css); this file adds only the feature list, the admin list, the three packages with their concept
   pictures and the overview's list of businesses. */
.niche-block{margin:clamp(56px,7vw,110px) 0 0}
.niche-block:first-child{margin-top:0}
.niche-page .page-action{margin-top:32px}

/* what the website does: the essentials grid, with the feature names set as headings */
.niche-features dt{font-size:19px;font-weight:700;font-stretch:112%;line-height:1.3}
.niche-features dd{color:var(--ink);opacity:.86}

/* the admin: what it is on the left, the owner's tasks on the right */
.niche-admin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding:clamp(32px,4vw,56px);border-radius:24px;background:#1c1b16}
.niche-admin p{margin:0;max-width:52ch;font-size:16px;line-height:1.7;color:var(--muted)}
.niche-admin .questions-title{margin-bottom:20px}
.admin-list{list-style:none;display:grid;gap:14px;margin:0;padding:0;font-size:16px;line-height:1.5}
.admin-list li{display:flex;gap:12px}
/* one gold tick for the admin tasks and the package terms (the package pages' own tick, packages.css, is placed differently) */
.admin-list li::before,.tier .offer-scope li::before{content:"";position:static;flex:none;width:18px;height:18px;margin-top:2px;rotate:none;border-radius:50%;background:rgba(232,197,71,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23E8C547' stroke-width='1.6'/%3E%3C/svg%3E") center/18px}
.tier .offer-scope li::before{width:16px;height:16px;background-size:16px}

/* the three packages: a large concept picture beside what the package holds for this business; Pro's picture sits
   on the right, so the eye zigzags down the three */
.tiers-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.tiers-head .questions-title{margin:0}
.tiers-head p{margin:0;max-width:52ch;font-size:16px;line-height:1.7;color:var(--muted)}
.tiers{display:grid;gap:clamp(48px,6vw,96px)}
.tier{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.tier.is-pro .tier-shot{order:2}
.tier-shot{margin:0}
.tier-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px}
/* every concept picture keeps an edge on the near-black page, dark ones too (release polish, 5 Nov 2026): it sits on
   the site's raised surface, one tone step up, since the house rules fail 1px outlines */
.tier-shot img,.niche-list img{padding:5px;background:#1c1b16}
.tier-shot figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.tier-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:clamp(28px,2.4vw,40px);line-height:1.1;font-weight:800;font-stretch:112%;margin:0 0 12px}
.tier-name .rec{font-size:13px;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--gold);color:#15150f;line-height:1;font-stretch:100%}
.tier-holds{margin:0 0 24px;font-size:17px;line-height:1.6;max-width:44ch}
.tier .price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 8px}
.tier .price-line strong{font-size:clamp(36px,3vw,48px);line-height:1;letter-spacing:-.025em;font-weight:800;font-stretch:125%;font-variant-numeric:tabular-nums}
.tier .price-line span{font-size:14px;color:var(--muted)}
.tier .recurring{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--muted)}
.tier .recurring strong{color:var(--ink)}
.tier .offer-scope{list-style:none;display:grid;gap:8px;margin:0 0 26px;padding:0;font-size:15px;line-height:1.45}
.tier .offer-scope li{display:flex;gap:12px;padding:0}
.tier-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.tier-actions .pick-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 26px;border-radius:99px;background:rgba(232,197,71,.14);color:var(--gold);font-weight:700;font-size:15px;text-decoration:none;transition:background .18s,color .18s,transform .16s cubic-bezier(.2,.8,.2,1)}
.tier-actions .pick-btn.is-pro{background:var(--gold);color:#15150f}
@media(hover:hover){.tier-actions .pick-btn:hover{background:#f3d363;color:#15150f}}
@media (prefers-reduced-motion:no-preference){.tier-actions .pick-btn:active{transform:scale(.97)}}

/* the overview: one picture and one line per kind of business */
.niche-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px);margin:0;padding:0}
.niche-list a{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none}
.niche-list img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;margin-bottom:10px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.niche-list .niche-name{margin:0;font-size:20px;line-height:1.25;font-weight:800;font-stretch:112%;overflow-wrap:anywhere;transition:color .2s ease}
.niche-list span{font-size:15px;line-height:1.5;color:var(--muted)}
@media (hover:hover){.niche-list a:hover .niche-name{color:var(--gold)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.niche-list a:hover img{transform:translateY(-4px)}}
.niche-else{margin-top:clamp(48px,6vw,88px);align-items:center}
.niche-else .page-action{margin:0;flex:none}
.niche-else p{max-width:52ch}

@media(max-width:1100px){.niche-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
.niche-admin,.tiers-head,.tier{grid-template-columns:1fr}
.tier.is-pro .tier-shot{order:0}
.tier{gap:22px}
.niche-else{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
.niche-admin{padding:26px 20px}
.niche-list{grid-template-columns:1fr;max-width:520px}
.tier-holds{font-size:16px}
/* the button and its "in detail" link stacked the same way in all three packages */
.tier-actions{flex-direction:column;align-items:flex-start;gap:4px}
.tier-actions .text-link{min-height:44px}
}
/* the opening sentence says plainly what the page is, a step larger than the other inner pages' (inspector, 5 Nov 2026) */
.niche-page .page-intro>p{font-size:18px;line-height:1.6;max-width:60ch}

/* very long words (or a long translated word) wrap instead of pushing the page sideways (5 Nov 2026) */
main h2,main h3,main summary{overflow-wrap:anywhere}
/* the cost guide's "What you pay, and when" (5 Nov 2026): the four moments side by side in two columns on wide
   screens, one column on phones */
.pay-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:none;margin-top:28px}
.pay-steps li{margin-top:0}
@media(max-width:760px){.pay-steps{grid-template-columns:1fr;gap:8px}}
/* after the list of kinds of business (Duhok page), more room, so the last card's line never reads as a label over the
   next heading */
.niche-block:has(.niche-list)+.niche-block{margin-top:clamp(96px,10vw,140px)}
/* the honesty note by the overview pictures (website review 5 Nov 2026, pick 11c) */
.niche-note{margin:28px 0 0;max-width:65ch;color:var(--muted);font-size:15px;line-height:1.6}