/* ==========================================================================
   Crown Office Supplies — Net 30 Terms page  (template-net30-terms.php)

   Loads AFTER cos-home.css, which owns the tokens and the shared primitives
   (.cos-btn, .cos-h1/h2, .cos-eyebrow, .cos-lead, .cos-bleed, .cos-wrap,
   .cos-section, .cos-section-head and the .cos-faq__* accordion). Nothing in
   here re-declares a token — that is how two pages drift apart.

   Brand: #FED700 yellow · #2E094E deep violet.

   COMPONENT NOTE — this page must not look like a reskin of a section that
   already exists elsewhere on the site. The homepage already uses circular
   numerals on navy for its Net 30 steps and large ghosted numerals over a
   hairline rule for "Why Crown". So the step list here is a THIRD treatment:
   a single connected rail with the numeral sitting ON the line. Same visual
   language (numerals, yellow accent, generous air), different tell.
   ========================================================================== */

/* Electro's #primary.content-area is a Bootstrap 75% column because the default
   page layout expects a sidebar. Without this the page renders ~870px inside a
   1200px container. Same trap as every other template in this theme. */
body.cos-n30t-page .content-area {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Contains the .cos-bleed 100vmax overhang so it never makes a scrollbar. */
body.cos-n30t-page { overflow-x: hidden; }

@supports (overflow-x: clip) {
	body.cos-n30t-page { overflow-x: clip; }
}

body.cos-n30t-page .breadcrumb { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   1 — Hero

   Two columns: the claim, and the four facts that support it. On a page whose
   whole brief was "too much information everywhere", the hero has to settle
   the question — 30 days, no interest, one account — before anyone scrolls.
   -------------------------------------------------------------------------- */
.cos-n30t-hero {
	background:
		radial-gradient(70% 130% at 8% 0%, #fbf7ff 0%, rgba(251, 247, 255, 0) 62%),
		var(--cos-surface-2);
}

.cos-n30t-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.cos-n30t-hero__copy { max-width: 34ch; }

.cos-page .cos-n30t-hero .cos-h1 {
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	line-height: 1.02;
}

/* The full stop in "Net 30 terms." gets the brand yellow — the one piece of
   decoration in the hero, and it costs no extra words. */
.cos-page .cos-n30t-hero .cos-h1::after {
	content: "";
	display: inline-block;
	width: .28em;
	height: .28em;
	margin-left: .06em;
	border-radius: 50%;
	background: var(--cos-yellow);
	vertical-align: baseline;
}

.cos-n30t-hero .cos-lead { margin-bottom: 28px; }

.cos-n30t-hero__actions,
.cos-n30t-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- the at-a-glance facts ------------------------------------------------
   A 2×2 grid of hairline-separated cells rather than four boxes: boxes would
   read as a pricing table, and there is nothing to compare here. */
.cos-n30t-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	overflow: hidden;
	box-shadow: var(--cos-shadow);
}

.cos-n30t-fact {
	padding: clamp(20px, 2.4vw, 30px);
	border-top: 1px solid var(--cos-line);
	border-left: 1px solid var(--cos-line);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Only the interior hairlines — the card already has an outer border. */
.cos-n30t-fact:nth-child(-n + 2) { border-top: 0; }
.cos-n30t-fact:nth-child(odd) { border-left: 0; }

.cos-n30t-fact__v {
	font-family: var(--cos-font-display);
	font-weight: 800;
	letter-spacing: -.03em;
	font-size: clamp(1.2rem, 1.9vw, 1.55rem);
	line-height: 1.15;
	color: var(--cos-ink);
}

.cos-n30t-fact__k {
	font-size: .875rem;
	line-height: 1.45;
	color: var(--cos-muted);
}


/* --------------------------------------------------------------------------
   2 — How to open an account

   The rail: a 1px line running down the numeral column, with each numeral
   punched out of it on a white disc. One continuous line is what makes five
   items read as a sequence rather than five unrelated blocks.
   -------------------------------------------------------------------------- */
.cos-n30t-steps { background: var(--cos-surface); }

/* Heading + phone note on the left, the rail on the right. The aside is
   sticky so the phone number stays reachable for the whole scroll of the
   section instead of only at its foot. */
.cos-n30t-steps__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.cos-n30t-steps__aside { position: sticky; top: 96px; }

.cos-page .cos-n30t-steps__aside .cos-section-head { margin-bottom: 28px; }

.cos-n30t-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 780px;
	position: relative;
}

/* The rail itself. Stops short at both ends so it does not run past the first
   and last numerals. */
.cos-n30t-steps__list::before {
	content: "";
	position: absolute;
	top: 26px;
	bottom: 26px;
	left: 25px;
	width: 2px;
	background: linear-gradient(
		to bottom,
		var(--cos-line-strong) 0%,
		var(--cos-line-strong) 88%,
		transparent 100%
	);
}

.cos-n30t-step {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 28px);
	padding-block: clamp(18px, 2vw, 26px);
}

.cos-n30t-step:first-child { padding-top: 0; }
.cos-n30t-step:last-child { padding-bottom: 0; }

.cos-n30t-step__n {
	position: relative;
	z-index: 1;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--cos-surface);
	border: 2px solid var(--cos-line-strong);
	font-family: var(--cos-font-display);
	font-weight: 800;
	font-size: .95rem;
	letter-spacing: -.02em;
	color: var(--cos-muted);
	transition: border-color .35s var(--cos-ease), color .35s var(--cos-ease), background-color .35s var(--cos-ease);
}

/* The final step is the payoff — give it the brand colour so the eye lands
   there when it scans the numeral column. */
.cos-n30t-step:last-child .cos-n30t-step__n {
	background: var(--cos-yellow);
	border-color: var(--cos-yellow);
	color: var(--cos-ink);
}

.cos-n30t-step__t {
	font-family: var(--cos-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cos-ink);
	margin: 0 0 .35em;
	padding-top: 12px;
}

.cos-page .cos-n30t-step__body p {
	margin: 0;
	max-width: 58ch;
}

.cos-n30t-steps__help {
	margin: 0;
	padding: 18px 22px;
	max-width: 420px;
	background: var(--cos-surface-2);
	border-left: 3px solid var(--cos-yellow);
	border-radius: 0 var(--cos-r-sm) var(--cos-r-sm) 0;
	font-size: .95rem;
	color: var(--cos-text);
}

.cos-page .cos-n30t-steps__help a {
	font-weight: 700;
	color: var(--cos-ink);
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   3 — Qualifying

   Requirements on the left as a checklist (they are things to tick off),
   context on the right as a definition list (it is reference, not a task).
   Different structures because they are different kinds of information.
   -------------------------------------------------------------------------- */
.cos-n30t-qual { background: var(--cos-surface-2); }

.cos-n30t-qual__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}

.cos-n30t-sub {
	font-family: var(--cos-font-display);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin: 0 0 20px;
}

.cos-n30t-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.cos-n30t-check li {
	position: relative;
	padding-left: 38px;
	line-height: 1.6;
}

/* Inline check mark drawn in CSS — an SVG per bullet would be five extra HTTP
   round trips or a sprite to maintain, for a shape that is two strokes. */
.cos-n30t-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cos-yellow-soft);
	border: 1px solid rgba(254, 215, 0, .55);
}

.cos-n30t-check li::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 9px;
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--cos-ink);
	border-bottom: 2px solid var(--cos-ink);
	transform: rotate(-45deg);
}

.cos-n30t-check strong {
	display: block;
	color: var(--cos-ink);
	font-weight: 700;
}

.cos-n30t-know {
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	padding: clamp(24px, 3vw, 34px);
	box-shadow: var(--cos-shadow-sm);
}

.cos-n30t-know__list { margin: 0; }

.cos-n30t-know__list dt {
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: .98rem;
	color: var(--cos-ink);
	letter-spacing: -.01em;
}

.cos-page .cos-n30t-know__list dd {
	margin: 4px 0 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--cos-text);
}

.cos-n30t-know__list dd + dt {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--cos-line);
}


/* --------------------------------------------------------------------------
   4 — Paying invoices

   Deliberately plain: five rows, hairline separated, no icons. This is the
   section people read when something has gone wrong with a bill, and
   decoration gets in the way of that.
   -------------------------------------------------------------------------- */
.cos-n30t-pay { background: var(--cos-surface); }

.cos-n30t-pay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 820px;
	border-top: 1px solid var(--cos-line);
}

.cos-n30t-pay__list li {
	padding: 18px 0 18px 34px;
	border-bottom: 1px solid var(--cos-line);
	position: relative;
	line-height: 1.65;
}

.cos-n30t-pay__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 27px;
	width: 14px;
	height: 2px;
	background: var(--cos-yellow);
}

.cos-page .cos-n30t-pay__list strong { color: var(--cos-ink); }


/* --------------------------------------------------------------------------
   5 — FAQ  (accordion itself comes from cos-home.css)
   -------------------------------------------------------------------------- */
.cos-n30t-faq { background: var(--cos-surface-2); }

/* cos-home.css centres this list because the homepage FAQ has a centred
   heading. Here the section head is left-aligned like every other section on
   the page, so a centred list reads as a misalignment. */
.cos-n30t-faq .cos-faq__list {
	max-width: 860px;
	margin-inline: 0;
}


/* --------------------------------------------------------------------------
   6 — Closing CTA
   -------------------------------------------------------------------------- */
.cos-n30t-cta {
	background:
		radial-gradient(90% 140% at 50% 0%, var(--cos-navy-700) 0%, rgba(77, 28, 125, 0) 60%),
		var(--cos-navy);
	text-align: center;
}

.cos-n30t-cta__inner { max-width: 720px; }

.cos-page .cos-n30t-cta .cos-eyebrow { justify-content: center; }
.cos-page .cos-n30t-cta .cos-h2 { color: #fff; }

.cos-page .cos-n30t-cta .cos-lead {
	color: rgba(255, 255, 255, .78);
	margin-bottom: 28px;
}

.cos-n30t-cta__actions { justify-content: center; }


/* --------------------------------------------------------------------------
   Responsive

   One breakpoint per structural change, not a blanket mobile stylesheet.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.cos-n30t-hero__grid,
	.cos-n30t-qual__grid,
	.cos-n30t-steps__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cos-n30t-hero__copy { max-width: 100%; }

	/* Sticky is wrong once the aside is stacked above the list — it would pin
	   the heading over the steps as they scroll past. */
	.cos-n30t-steps__aside { position: static; }
	.cos-n30t-steps__help { max-width: none; }
}

@media (max-width: 560px) {
	/* Four facts stack to one column — at this width a 2×2 grid leaves
	   "when the invoice is settled by its due date" on four lines. */
	.cos-n30t-facts { grid-template-columns: minmax(0, 1fr); }
	.cos-n30t-fact:nth-child(-n + 2) { border-top: 1px solid var(--cos-line); }
	.cos-n30t-fact:first-child { border-top: 0; }
	.cos-n30t-fact { border-left: 0; }

	/* Numerals shrink and the rail follows them, otherwise the copy column
	   drops below ~200px and every step title wraps. */
	.cos-n30t-step { grid-template-columns: 40px minmax(0, 1fr); }
	.cos-n30t-step__n { width: 40px; height: 40px; font-size: .85rem; }
	.cos-n30t-step__t { padding-top: 7px; }
	.cos-n30t-steps__list::before { left: 19px; top: 20px; bottom: 20px; }
}