/* Growth Retainer tiers (offer mockups, 7 Oct 2026).
   Loaded after growth.css and motion.css. Owns the hero price key, the yellow tier field,
   the third production allowance and the closing terms line. Shared stylesheets stay untouched. */

/* ---------- Hero price key: two ruled rows on the photographic plate, no fill at rest ---------- */
.growth-page .tier-key{list-style:none;max-width:520px;margin:26px 0 26px;padding:0;border:1px solid rgba(243,239,230,.38)}
.growth-page .tier-key li{margin:0}
.growth-page .tier-key li+li{border-top:1px solid rgba(243,239,230,.38)}
.growth-page .tier-key a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 24px;padding:14px 18px;color:var(--paper);text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.7);transition:background .22s ease,color .22s ease,transform .22s ease}
.growth-page .tier-key__name{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.growth-page .tier-key__name::before{content:'';width:9px;height:9px;background:var(--red);flex:none}
.growth-page .tier-key__for{grid-column:1;padding-left:19px;font-size:.92rem;font-weight:600;line-height:1.3;color:rgba(243,239,230,.84)}
.growth-page .tier-key__price{grid-column:2;grid-row:1/span 2;text-align:right;font-size:clamp(1.65rem,2.2vw,2.1rem);font-weight:800;line-height:1;letter-spacing:-.05em;white-space:nowrap}
.growth-page .tier-key__price small{display:block;margin-top:6px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,230,.74)}
.growth-page .tier-key a:hover,.growth-page .tier-key a:focus-visible{position:relative;z-index:1;background:var(--paper);color:var(--ink);text-shadow:none;transform:translateY(-3px);outline:none}
.growth-page .tier-key a:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.growth-page .tier-key a:hover .tier-key__for,.growth-page .tier-key a:focus-visible .tier-key__for,.growth-page .tier-key a:hover small,.growth-page .tier-key a:focus-visible small{color:rgba(16,16,15,.72)}

/* ---------- The tier field: one full yellow field with two ink price panels ---------- */
.growth-page .tiers{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(56px,6vw,96px);border-top:2px solid var(--ink);background:var(--yellow);color:var(--ink)}
.growth-page .tiers::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(16,16,15,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(16,16,15,.065) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.growth-page .tiers__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(28px,3vw,44px);padding-bottom:clamp(24px,2.6vw,36px);border-bottom:2px solid var(--ink)}
.growth-page .tiers .eyebrow{color:rgba(16,16,15,.7)}
.growth-page .tiers .eyebrow::before{background:var(--ink)}
.growth-page .tiers h2{max-width:15ch;margin:20px 0 0;color:var(--ink)}
.growth-page .tiers .tiers__lead{max-width:42ch;margin:0;font-size:clamp(1.05rem,1.3vw,1.22rem);font-weight:600;line-height:1.45;color:rgba(16,16,15,.82)}

/* Two panels whose rows line up across the pair, so the differences read straight across. */
.growth-page .tiers__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,auto);column-gap:clamp(16px,2vw,28px)}
.growth-page .tier{grid-row:span 8;display:grid;grid-template-rows:subgrid;row-gap:0;padding:clamp(28px,3.2vw,48px);border-top:6px solid var(--red);background:var(--ink);color:var(--paper)}
.growth-page .tier .tier__name{margin:0;font-size:clamp(3.2rem,5.4vw,5.5rem);line-height:.82;letter-spacing:-.075em;color:var(--paper)}
.growth-page .tier__name span{color:var(--red)}
.growth-page .tier .tier__for{display:grid;align-content:start;gap:10px;margin:22px 0 0;font-size:1rem}
.growth-page .tier__for b{display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,230,.66)}
.growth-page .tier__for b::before{content:'';width:9px;height:9px;background:var(--red);flex:none}
.growth-page .tier__for span{max-width:26ch;font-size:clamp(1.25rem,1.75vw,1.65rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--paper)}
.growth-page .tier .tier__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:26px 0 0;padding:22px 0 24px;border-top:1px solid rgba(243,239,230,.26);font-size:1rem}
.growth-page .tier__price strong{font-size:clamp(3rem,4.6vw,4.75rem);font-weight:800;line-height:.85;letter-spacing:-.065em;color:var(--paper)}
.growth-page .tier__ast{margin-left:.04em;font-size:.42em;vertical-align:top;line-height:1;color:var(--red)}
.growth-page .tier__price>span{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,230,.72)}
.growth-page .tier__rows{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:0;margin:0;border-top:1px solid rgba(243,239,230,.26)}
.growth-page .tier__rows>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(243,239,230,.16)}
.growth-page .tier__rows dt{font-size:.68rem;font-weight:800;line-height:1.45;letter-spacing:.13em;text-transform:uppercase;color:rgba(243,239,230,.64)}
.growth-page .tier__rows dd{margin:0;font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--paper)}
.growth-page .tier .tier__cta{justify-self:start;align-self:end;margin-top:28px;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.growth-page .tier .tier__cta:hover,.growth-page .tier .tier__cta:focus-visible{background:var(--red);color:var(--paper);border-color:var(--red)}
.growth-page .tiers .tiers__terms{max-width:none;margin:22px 0 0;font-size:.92rem;font-weight:700;line-height:1.5;color:rgba(16,16,15,.76)}

/* ---------- Production band: three allowances (articles on Local, on National, pages on both) ---------- */
.growth-page .growth-production{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.62fr)) minmax(0,1fr)}

/* ---------- Red close: prices at the size growth.css intends (its rule loses to `.growth-page main p`), then the terms line ---------- */
.growth-page .growth-close__action>p{font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.25}
.growth-page .growth-close__terms{display:block;max-width:36ch;margin-top:24px;font-size:.94rem;font-weight:700;line-height:1.5;color:var(--paper)}

@media(max-width:980px){
  .growth-page .tiers__head{grid-template-columns:1fr;gap:20px;align-items:start}
  .growth-page .growth-production{grid-template-columns:repeat(3,minmax(0,1fr))}
  .growth-page .growth-production>div:first-child,.growth-page .growth-production>p{grid-column:1/-1!important}
  .growth-page .growth-production>div+div{border-top:1px solid rgba(16,16,15,.3)}
  .growth-page .growth-production>div:nth-child(2){border-left:0}
  .growth-page .growth-production>p{border-top:1px solid rgba(16,16,15,.3);border-left:0}
}
@media(max-width:860px){
  .growth-page .tiers__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px}
  .growth-page .tier{grid-row:auto;display:flex;flex-direction:column}
  .growth-page .tier__rows{display:block}
  .growth-page .tier .tier__cta{align-self:flex-start}
}
@media(max-width:640px){
  .growth-page .tier-key a{padding:13px 14px;gap:4px 14px}
  .growth-page .tier-key__name{font-size:1.1rem}
  .growth-page .tier-key__for{font-size:.86rem}
  .growth-page .tier-key__price{font-size:1.5rem}
  .growth-page .tiers h2{max-width:13ch}
  .growth-page .tier{padding:28px 22px 30px}
  .growth-page .tier .tier__for{margin-top:20px}
  .growth-page .tier .tier__price{margin-top:24px;padding:22px 0 24px}
  .growth-page .tier__rows>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0}
  .growth-page .tier .tier__cta{margin-top:26px}
  .growth-page .growth-production{grid-template-columns:minmax(0,1fr)}
  .growth-page .growth-production>div+div{border-left:0!important}
  .growth-page .growth-production__allowance{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
  .growth-page .growth-production__allowance strong{flex:0 0 auto;min-width:1.1ch}
}
@media(prefers-reduced-motion:reduce){
  .growth-page .tier-key a{transition:none}
  .growth-page .tier-key a:hover,.growth-page .tier-key a:focus-visible{transform:none}
}