/* Sample campaign page: budget bars and ad mockups. Loaded by /campaign-sample only. */
.budget { display: grid; gap: 14px; }
.budget .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: end; }
.budget .line .name { font-weight: 700; color: var(--ink); }
.budget .line .amt { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--ink); font-variation-settings: "wdth" 80; }
.budget .track { grid-column: 1 / -1; height: 22px; border: var(--bw) solid var(--ink); border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.budget .track i { height: 100%; background: var(--blue); border-right: var(--bw) solid var(--ink); }
.budget .track i.red { background: var(--red); } .budget .track i.sun { background: var(--sun); } .budget .track i.green { background: var(--green); }
.budget .why { font-size: .9rem; color: var(--muted); grid-column: 1 / -1; margin: 0; }

.ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
@media (max-width: 980px) { .ads { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; } }
.ad { border: var(--bw) solid var(--ink); border-radius: var(--r); background: #fff; color: #15131A; box-shadow: var(--shadow); overflow: hidden; font-family: var(--sans); }
.ad .tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 6px 12px; }
.ad .acct { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; font-size: .9rem; }
.ad .acct .av { width: 34px; height: 34px; border-radius: 50%; background: var(--peach); border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 900; }
.ad .acct small { display: block; color: #6F6A7A; font-size: .78rem; }
.ad .copy { padding: 0 14px 10px; font-size: .92rem; line-height: 1.4; }
.ad .art { aspect-ratio: 1 / 1; background: var(--sun); border-block: 1.5px solid var(--ink); display: grid; place-items: center; text-align: center; padding: 20px; }
.ad .art .h { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: .92; letter-spacing: -.02em; font-variation-settings: "wdth" 76; color: var(--ink); }
.ad .art .h em { font-style: normal; color: var(--red); }
.ad .art .s { font-size: .9rem; margin-top: 10px; color: var(--ink-2); }
.ad .cta { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 14px; font-size: .85rem; color: #6F6A7A; }
.ad .cta b { color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 6px; padding: 6px 12px; font-size: .82rem; }
.ad.search { padding: 16px 18px; display: grid; gap: 8px; }
.ad.search .sp { font-size: .75rem; font-weight: 700; }
.ad.search .url { font-size: .82rem; color: #1a6b2f; }
.ad.search .ttl { font-size: 1.12rem; color: #1a0dab; font-weight: 600; line-height: 1.25; }
.ad.search .desc { font-size: .9rem; color: #3A3744; line-height: 1.4; }
.ad.search .links { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: #1a0dab; }
.ad.search .ext { font-size: .82rem; color: #3A3744; border-top: 1px solid rgba(21,19,26,.15); padding-top: 8px; }
.ad.vertical { background: var(--ink); color: var(--paper); aspect-ratio: 9 / 16; max-height: 560px; display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.ad.vertical .tag { background: var(--red); }
.ad.vertical .frame { display: grid; align-content: end; gap: 10px; padding: 20px; background: linear-gradient(180deg, rgba(21,19,26,0) 30%, rgba(21,19,26,.85)), repeating-linear-gradient(135deg, #2b2733 0 14px, #1c1922 14px 28px); }
.ad.vertical .frame .cap { font-size: .9rem; line-height: 1.4; }
.ad.vertical .frame .cap b { color: var(--sun); }
.ad.vertical .frame .h { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: .92; font-variation-settings: "wdth" 76; color: var(--paper); }
.ad.vertical .frame .on { display: inline-block; background: var(--sun); color: var(--ink); font-weight: 800; font-size: .8rem; padding: 4px 10px; border: 1.5px solid var(--ink); width: fit-content; }
.ad.vertical .cta { color: rgba(255,247,230,.7); }
.ad.vertical .cta b { background: var(--red); color: var(--paper); border-color: var(--red); }
.matrix td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.rules li b { color: var(--paper); }

/* Hero: the headline shares the row with the drawn phone, so it steps down a size
   to keep "More covers for" on one line beside it. */
.hero-grid h1 { font-size: clamp(2.6rem, 1.4rem + 3.5vw, 4.6rem); }