/* Ad-hoc fixes page: styles only this page needs. Shared look comes from c.css. */

/* Hero: got one job that drives you mad? The same layout as the Digital Home hero (digital-home.css),
   so the two pages match: words on the left, the picture on the right with its edges fading into the paper. */
.ah-hero{padding-top:clamp(140px,12vw,180px)}
.ah-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.ah-hero-text{grid-column:1 / span 6;grid-row:1;position:relative;z-index:1}
.ah-title{margin:0;font:300 clamp(44px,5.2vw,76px)/1.05 var(--serif);letter-spacing:-.04em;color:#1b3832;text-wrap:balance}
.ah-lede{max-width:520px;margin:clamp(24px,2.4vw,32px) 0 0;font:300 clamp(20px,1.6vw,23px)/1.4 var(--serif);letter-spacing:-.015em;color:var(--deep);text-wrap:pretty}
.ah-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.ah-actions .f-btn{min-height:50px;padding:0 20px;font-size:var(--type-action)}
.ah-hero-art{grid-column:7 / -1;grid-row:1;margin:0 calc(var(--gutter) * -.5) 0 calc(var(--gap) * -1)}
.ah-hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 18%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  html.js .ah-title,html.js .ah-lede,html.js .ah-actions{animation:f-rise 1.1s var(--ease) both}
  html.js .ah-title{animation-delay:.06s}
  html.js .ah-lede{animation-delay:.2s}
  html.js .ah-actions{animation-delay:.28s}
  html.js .ah-hero-art{animation:ah-fade 1.6s var(--ease) .2s both}
}
@keyframes ah-fade{0%{opacity:0;transform:translateY(12px)}}
@media (max-width:960px){
  .ah-hero-text,.ah-hero-art{grid-column:1 / -1;grid-row:auto}
  .ah-hero-text{max-width:600px}
  .ah-hero-art{margin:40px calc(var(--gutter) * -1) 0}
}
@media (max-width:760px){
  .ah-hero{padding-top:136px}
  .ah-title{font-size:clamp(40px,11.5vw,56px);line-height:1.06}
  .ah-lede{font-size:21px}
  .ah-actions{display:grid;gap:12px}
  .ah-actions .f-btn{width:100%;min-height:52px;font-size:15px}
  .ah-hero-art{margin-top:32px}
}

/* Section 2 (id="prices"): three price rows with the same look as the Digital Home Section 5 rows
   (the c.css .f-todo-* rows, with the Digital Home row spacing), then the same quiet small print. */
.ah-prices{margin-top:var(--section);scroll-margin-top:104px}
.ah-prices-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.ah-prices-grid h2{grid-column:1 / span 6;max-width:600px;margin:0;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.ah-price-rows{margin-top:var(--space-within)}
.ah-price-rows .f-todo-row{padding:22px 0}
/* Small print: smaller and lighter than the row text. #6b716d is the lightest grey that still passes AA contrast on the paper. */
.ah-prices-small{grid-column:1 / span 8;margin:28px 0 0;font-size:14px;line-height:1.6;color:var(--small-print);text-wrap:pretty}
@media (max-width:960px){
  .ah-prices-grid h2,.ah-prices-small{grid-column:1 / -1}
}
@media (max-width:760px){
  .ah-price-rows{margin-top:36px}
  .ah-price-rows .f-todo-row{padding:22px 0}
}

/* Section 3 (id="how"): words on the left (Digital Home heading and body styles), and on the right, level with them,
   the large serif line in the look of "Stop paying me and nothing breaks." (.dh-costs-punch on the Digital Home page). */
.ah-how{margin-top:var(--section)}
.ah-how-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.ah-how-text{grid-column:1 / span 6;max-width:600px}
.ah-how-text h2{margin:0 0 24px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.ah-how-text p{margin:0;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.ah-how-quote{grid-column:8 / -1;margin:0}
@media (max-width:960px){
  .ah-how-text,.ah-how-quote{grid-column:1 / -1}
  .ah-how-quote{margin-top:48px}
}
@media (max-width:760px){
  .ah-how-text p{font-size:17px}
  .ah-how-quote{margin-top:40px}
}

/* Section 4 (id="more"): one short line, left aligned, in the quiet serif of the Digital Home proof lines.
   The section gap gives it clear space above; the closing call to action's own gap gives it space below. */
.ah-more{margin-top:var(--section)}
.ah-more-line{margin:0;font:300 clamp(19px,1.5vw,21px)/1.45 var(--serif);letter-spacing:-.01em;color:var(--deep);text-wrap:pretty}
@media (max-width:760px){
  .ah-more-line{font-size:19px}
}

/* Gate 6 Oct (Simon): no fade from invisible. */
@keyframes ah-fade{0%{transform:translateY(12px)}}