/* SproutWell (12 November 2026): the reading pages. Kinds of business (sector.php), guides (guides.php, guide.php),
   Questions (questions.php), Compare (compare.php), News (news.php, news-article.php, news-subscribe.php and the weekly
   email box) and Domain and Hosting. Built on site.css: cream page, white cards with the black "sticker" outline, leaf
   green links and buttons, the four petal colours. One column on phones, nothing wider than the screen at 360px.
   Every text colour pair passes 4.5 to 1: on leaf green only white or cream text; on sun yellow only ink. */

/* ---------- page heads and the reading column ---------- */
.reading-body > section { max-width: 860px; margin: 0 auto 44px; padding: 0; min-height: 0; }
.reading-body > section h2 { font-size: 1.6rem; margin: 0 0 14px; }
.sc-head { padding-bottom: 36px; }
.sc-head .wrap { max-width: calc(860px + 32px); }
.gd-head .wrap { max-width: calc(760px + 32px); }
.gd-head .eyebrow a { color: inherit; }
.reading-body > section > .guide { max-width: none; }

/* the sticker box, shared by every card on these pages */
.sc-list li, .sc-plats li, .sc-pack, .sc-verdict, .sc-q, .guide-list li, .gd-sec, .gd-help, .cp-card,
.news-cta, .news-signup, .guide .dh-box, .guide .g-note {
  border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline);
}

/* ---------- kinds of business (sector.php) ---------- */
.sc-list, .sc-plats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sc-list li, .sc-plats li { display: grid; gap: 6px; align-content: start; padding: 16px 18px; background: var(--card); }
.sc-list li { border-top-width: 8px; }
.sc-list li:nth-child(4n+1) { border-top-color: var(--petal); }
.sc-list li:nth-child(4n+2) { border-top-color: var(--sky); }
.sc-list li:nth-child(4n+3) { border-top-color: var(--sun); }
.sc-list li:nth-child(4n+4) { border-top-color: #F49AAE; }
.sc-list b, .sc-plats b { font: 700 1.1rem/1.3 var(--display); color: var(--ink); }
.sc-list span, .sc-plats span { color: var(--muted); line-height: 1.55; }
.sc-plats li { background: #F3FAF0; }
.sc-plat > p { margin: 0 0 16px; max-width: 70ch; }

.sc-steps { list-style: none; counter-reset: sc; margin: 0; padding: 0; display: grid; gap: 14px; }
.sc-steps li { counter-increment: sc; position: relative; padding: 4px 0 0 52px; min-height: 38px; line-height: 1.55; }
.sc-steps li::before { content: counter(sc); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sun); color: var(--ink); border: 2.5px solid var(--outline); font: 700 1.05rem/31px var(--display); text-align: center; }
.sc-steps li:nth-child(4n+2)::before { background: #F49AAE; }
.sc-steps li:nth-child(4n+3)::before { background: var(--sky); }
.sc-steps li:nth-child(4n+4)::before { background: var(--card); }

.sc-verdict { background: var(--card); padding: 18px 22px 20px; }
.sc-verdict p { margin: 0 0 12px; line-height: 1.6; }
.sc-verdict p:last-child { margin-bottom: 0; }
.sc-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sc-answer span { font-size: 0.875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petal-text); font-weight: 700; }
.sc-answer b { display: inline-block; background: #EEF7EA; color: var(--ink); border: 2px solid var(--outline); border-radius: 999px; padding: 4px 14px; font: 700 1.05rem/1.35 var(--display); }

.sc-pack { background: #FFFBEF; padding: 20px 22px; box-shadow: 4px 4px 0 var(--outline), inset 0 6px 0 var(--sun); }
.sc-pack p { margin: 0 0 12px; }
.sc-pack .actions { margin-top: 16px; }
.sc-price { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.sc-price b { font: 700 1.3rem/1.2 var(--display); color: var(--ink); }
.sc-price span { font: 700 1.9rem/1 var(--display); color: var(--leaf); }
.sc-ex { margin-top: 18px; }
.sc-see .sy-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }

/* the questions, as open-and-close cards */
.sc-q { background: var(--card); margin: 0 0 14px; padding: 0; box-shadow: 3px 3px 0 var(--outline); }
.sc-q summary { cursor: pointer; list-style: none; position: relative; padding: 14px 48px 14px 18px; font-weight: 700; color: var(--ink); line-height: 1.4; border-radius: 13px; }
.sc-q summary::-webkit-details-marker { display: none; }
.sc-q summary::after { content: "+"; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--sun); border: 2px solid var(--outline); color: var(--ink); font: 700 1.1rem/21px var(--display); text-align: center; }
.sc-q[open] summary::after { content: "\2212"; background: #F49AAE; }
.sc-q summary:hover { color: var(--leaf); }
.sc-q summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.sc-q p { margin: 0; padding: 0 18px 16px; color: var(--ink); line-height: 1.6; }
.sc-faq > .small { margin-top: 8px; }
.sc-talk .actions { margin: 14px 0; }

/* ---------- guides and info pages ---------- */
.guide { max-width: 760px; margin: 0 auto; }
.guide h2 { font-size: 1.5rem; margin: 34px 0 10px; }
.guide table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.guide th, .guide td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.guide th { color: var(--ink); }
.guide td.n { white-space: nowrap; font-weight: 700; }
.guide .g-note { background: var(--card); padding: 14px 18px; }
.guide-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 18px; }
.guide-list li { background: var(--card); padding: 18px 20px; }
.guide-list a { font: 700 1.2rem/1.3 var(--display); color: var(--leaf); }
.guide-list p { margin: 6px 0 0; color: var(--muted); }
.guide-list .gd-date { font-size: 0.9375rem; }

/* each part of a guide is its own panel: white, leaf green or sun yellow, with diamond bullets and number circles */
.gd-guide ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.gd-guide ul > li { position: relative; padding-left: 28px; line-height: 1.55; }
.gd-guide ul > li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 10px; height: 10px; background: var(--petal); border: 1.5px solid var(--outline); border-radius: 2px; transform: rotate(45deg); }
.gd-guide ol { list-style: none; counter-reset: gd; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.gd-guide ol > li { counter-increment: gd; position: relative; padding: 2px 0 0 46px; min-height: 32px; line-height: 1.55; }
.gd-guide ol > li::before { content: counter(gd); position: absolute; left: 0; top: -1px; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: var(--ink); border: 2px solid var(--outline); font: 700 1rem/28px var(--display); text-align: center; }
.gd-sec { padding: 24px 28px 26px; margin: 28px 0; background: var(--card); }
.guide .gd-sec h2 { margin: 0 0 10px; }
.gd-sec > p { margin: 0 0 12px; }
.gd-sec > :last-child { margin-bottom: 0; }
.gd-paper b { color: var(--ink); }
.gd-green { background: var(--leaf); color: var(--page); }
.guide .gd-green h2, .gd-green b, .gd-green a { color: #FFFFFF; }
.gd-green a { text-decoration: underline; }
.gd-green ul > li::before { background: var(--sun); }
.gd-green ol > li::before { background: var(--sun); color: var(--ink); }
.gd-green a:focus-visible { outline-color: var(--sun); }
.gd-yellow { background: var(--sun); color: var(--ink); }
.guide .gd-yellow h2, .gd-yellow b, .gd-yellow a { color: var(--ink); }
.gd-yellow a { text-decoration: underline; }
.gd-yellow ul > li::before { background: var(--card); }
.gd-yellow ol > li::before { background: var(--card); color: var(--ink); }
.gd-help { background: #FFFBEF; padding: 6px 24px 22px; margin: 40px 0 24px; box-shadow: 4px 4px 0 var(--outline), inset 0 6px 0 var(--petal); }
.gd-help h2 { margin-top: 20px; }
.gd-help .actions { margin-top: 14px; }

/* tables that stack into cards on phones: guides (.gd-stack) and Compare (.cp-table) */
.gd-stack th[scope="row"] { font-weight: 700; }
.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline); overflow: hidden; }
.cp-table th, .cp-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.cp-table thead th { background: #FFF3D6; color: var(--ink); font: 700 1.05rem/1.3 var(--display); border-bottom: 2.5px solid var(--outline); }
.cp-table tbody th { color: var(--ink); font-weight: 700; width: 17%; }
.cp-table td { color: var(--ink); }
.cp-table .cp-us { background: #EEF7EA; }
.cp-table thead .cp-us { background: var(--leaf); color: #FFFFFF; }
.cp-table tr:last-child th, .cp-table tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  .gd-stack, .gd-stack tbody, .gd-stack tr, .gd-stack th, .gd-stack td,
  .cp-table, .cp-table tbody, .cp-table tr, .cp-table th, .cp-table td { display: block; width: auto; }
  .gd-stack thead, .cp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gd-stack tr { background: var(--card); border: 2.5px solid var(--outline); border-radius: 14px; box-shadow: 3px 3px 0 var(--outline); margin: 0 0 16px; padding: 4px 0; }
  .gd-stack th, .gd-stack td { border: 0; padding: 6px 14px; }
  .gd-stack th[scope="row"] { font: 700 1.1rem/1.3 var(--display); padding-top: 10px; }
  .gd-stack td::before, .cp-table td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--petal-text); font-size: 0.875rem; letter-spacing: .08em; text-transform: uppercase; }
  .cp-table { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .cp-table tr { background: var(--card); border: 2.5px solid var(--outline); border-radius: 14px; box-shadow: 3px 3px 0 var(--outline); margin: 0 0 18px; overflow: hidden; }
  .cp-table tbody th { width: auto; background: #FFF3D6; border-bottom: 2px solid var(--outline); font: 700 1.1rem/1.3 var(--display); }
  .cp-table td { border-bottom: 1px solid var(--rule); }
  .cp-table tr td:last-child { border-bottom: 0; }
}

/* ---------- Compare ---------- */
.cp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cp-card { background: var(--card); padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.cp-card h3 { font-size: 1.25rem; }
.cp-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.cp-card-us { background: #EEF7EA; }
.cp-card-us p { color: var(--ink); }
@media (max-width: 860px) { .cp-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Domain and Hosting (domain-and-hosting.php) ---------- */
.dh-steps { list-style: none; counter-reset: dh; padding: 0; margin: 14px 0; display: grid; gap: 14px; }
.dh-steps li { counter-increment: dh; position: relative; padding-left: 50px; min-height: 34px; line-height: 1.55; }
.dh-steps li::before { content: counter(dh); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); color: var(--ink); border: 2px solid var(--outline); font: 700 1.05rem/30px var(--display); text-align: center; }
.dh-steps b { color: var(--ink); }
.guide .dh-box { background: var(--leaf); color: var(--page); padding: 26px 30px 28px; margin: 38px 0 28px; }
.guide .dh-box h2 { color: #FFFFFF; margin-top: 0; }
.dh-box ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.dh-box li { position: relative; padding-left: 28px; line-height: 1.55; }
.dh-box li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 10px; height: 10px; background: var(--sun); border: 1.5px solid var(--outline); border-radius: 2px; transform: rotate(45deg); }
.dh-box b, .dh-box a { color: #FFFFFF; }
.dh-head .wrap { max-width: calc(860px + 32px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.dh-head .wrap > * { grid-column: 1; }
.dh-head h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.dh-head .lead { margin-bottom: 0; }
.guide.dh-body { max-width: 860px; }
.dh-head .dh-art { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; display: flex; flex-direction: column; background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline); overflow: hidden; }
.dh-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 2.5px solid var(--outline); }
.dh-dots { display: flex; gap: 6px; flex: none; }
.dh-dots span { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--petal); }
.dh-dots span:nth-child(2) { background: var(--sun); }
.dh-dots span:nth-child(3) { background: var(--sky); }
.dh-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--page); border: 1.5px solid var(--rule); border-radius: 999px; padding: 3px 12px; font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; }
.dh-url svg { display: block; width: 11px; height: 13px; flex: none; }
.dh-page { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.dh-hero { display: grid; gap: 10px; align-content: center; flex: 1; min-height: 70px; max-height: 140px; background: var(--leaf); border-radius: 8px; padding: 18px; }
.dh-hero span { display: block; height: 12px; width: 45%; background: var(--sun); border-radius: 3px; }
.dh-hero span + span { height: 8px; width: 68%; background: #D9E3DC; }
.dh-line { display: block; height: 8px; width: 72%; background: var(--rule); border-radius: 3px; }
.dh-line.dh-short { width: 56%; }
.dh-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dh-btns { display: flex; gap: 10px; flex: 1; }
.dh-btns span { display: block; width: 34%; max-width: 90px; height: 24px; border: 2px solid var(--outline); border-radius: 8px; }
.dh-label { flex: none; background: var(--sun); color: var(--ink); border: 2px solid var(--outline); border-radius: 10px; padding: 9px 15px; font: 700 1.1rem/1.1 var(--display); }
@media (max-width: 760px) {
  .dh-head .wrap { grid-template-columns: minmax(0, 1fr); }
  .dh-head .dh-art { grid-column: 1; grid-row: auto; order: 4; min-height: 270px; margin: 22px 0 18px; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .sc-list, .sc-plats { grid-template-columns: minmax(0, 1fr); }
  .sc-see .sy-form { grid-template-columns: minmax(0, 1fr); }
  .guide .dh-box { padding: 22px 18px 24px; }
  .dh-steps li { padding-left: 44px; }
  .gd-sec { padding: 20px 18px 22px; }
  .gd-help { padding: 4px 18px 20px; }
  .sc-verdict, .sc-pack { padding: 16px 18px 18px; }
}
@media (max-width: 420px) { .guide td.n { white-space: normal; } }

/* ---------- News (D129) ---------- */
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; }
.news-item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: start; }
.news-item h2 { font-size: 1.35rem; margin: 0 0 4px; }
.news-item h2 a { color: var(--leaf); }
.news-pic, .news-hero { display: block; width: 100%; height: auto; border-radius: 14px; border: 2.5px solid var(--outline); }
.news-hero { max-width: 300px; margin: 0 0 22px; }
.news-meta { color: var(--muted); font-size: 0.95rem; margin: 0 0 8px; }
.news-article ul { padding-left: 1.3rem; }
.news-sources { overflow-wrap: anywhere; }
.news-cta { background: #FFFBEF; padding: 4px 22px 20px; margin: 36px 0 22px; }
.news-feed-link { margin-top: 30px; }
/* the weekly email's sign-up box (views/news-signup.php) */
.news-signup { background: var(--card); padding: 4px 22px 22px; margin: 36px 0 22px; }
.news-signup form { display: grid; gap: 16px; margin-top: 14px; }
.news-signup[aria-label] { margin-top: 0; padding-top: 8px; }   /* the sign-up page itself, with no heading in the box */
.news-signup .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.news-signup-go { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
@media (max-width: 640px) { .news-signup { padding-inline: 16px; } .news-signup .field-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .news-item { grid-template-columns: minmax(0, 1fr); gap: 12px; } .news-pic { max-width: 320px; } }