/* Automation page: hero example "one hour a day", the task cost calculator and the three stories.
   Calculator and note base styles come from ppc/ppc.css (loaded before this file). */

/* Hero panel */
.au-sheet { padding-bottom: 22px; }
.au-rows { margin-top: 14px !important; }
.au-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid #E3EAF0; }
.au-rows li span { color: var(--muted); font-size: 16px; }
.au-rows li b { font-family: var(--mono); font-weight: 600; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.au-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 10px; padding-top: 14px; border-top: 2px solid var(--night); }
.au-total span { font-weight: 800; font-size: 18px; }
.au-total b { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.05; font-weight: 800; color: #B8400D; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Calculator */
@media (min-width: 861px) { .au-calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.au-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.au-list { display: flex; flex-direction: column; gap: 14px; }
.au-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; margin: 0; padding: 14px 16px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); min-width: 0; }
.au-row-h { padding: 0 6px; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.au-act { grid-column: 1 / -1; }
.au-remove { grid-column: 1 / -1; justify-self: start; font: inherit; font-size: 14px; font-weight: 600; color: #9E2B2B; background: none; border: 0;
  padding: 4px 0; cursor: pointer; text-decoration: underline; }
.au-add { align-self: flex-start; font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: var(--white); border: 1.5px dashed var(--field); }
.au-add:hover { border-color: var(--orange); }
.au-add:focus-visible, .au-remove:focus-visible { outline: 3px solid rgba(240,101,28,.35); outline-offset: 2px; }
.au-add[hidden], .au-remove[hidden] { display: none; }

.au-card { border-radius: var(--radius); padding: 16px 18px; border: 2px solid var(--orange-on-dark); background: rgba(240, 101, 28, .2); margin-bottom: 16px; }
.au-card p { margin: 0 !important; }
.au-card-h { font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.au-card-h::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px;
  border-radius: 50%; background: var(--orange-on-dark); color: var(--night); font-size: 15px; vertical-align: 1px; }
.au-card-n { font-size: clamp(38px, 4.4vw, 52px); line-height: 1.08; font-weight: 800; color: #FFB089; margin: 8px 0 6px !important;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-card-sub { font-size: 15px; line-height: 1.45; }
.au-bars { display: grid; gap: 12px; margin-bottom: 16px; }
.au-bars-h { font-weight: 700; font-size: 14px; color: var(--muted-on-dark); text-transform: uppercase; letter-spacing: .04em; }
.au-brow { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.au-bname { color: var(--muted-on-dark); font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.au-bval { font-weight: 700; font-size: 15.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-bar { grid-column: 1 / -1; display: block; height: 12px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.au-bar i { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--orange) 0 6px, #F7A06E 6px 12px); }
.au-line { color: var(--muted-on-dark); font-size: 15px; line-height: 1.45; }
.au-week { color: var(--white); font-weight: 600; }
.ppc-out .au-cta { margin-top: 6px; white-space: normal; text-align: center; max-width: 100%; }

/* Stories */
.au-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.au-story { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; min-width: 0; }
.au-story-own { grid-column: 1 / -1; }
.au-story h3 { margin: 4px 0 12px; font-size: 22px; line-height: 1.25; }
.au-story-tag { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--ground); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.au-story-cols { display: grid; gap: 12px; }
.au-story-cols p { margin: 0; }
.au-story-k { margin: 0 0 4px !important; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.au-story-k-eff { margin-top: 16px !important; color: #157346; }
.au-how { margin: 0; padding-left: 20px; }
.au-how li { margin: 2px 0; }
.au-story-text { margin: 0; }
.au-eff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.au-eff li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: #E8F6EE; }
.au-eff b { font-size: 21px; line-height: 1.2; font-weight: 800; color: #0F5132; font-variant-numeric: tabular-nums; }
.au-eff span { font-size: 14px; color: #285B40; }

.au .svc-cards, .au .svc-args { max-width: none; }
.au-story-own .au-eff { grid-template-columns: minmax(0, 280px); }
@media (min-width: 900px) { .au .svc-cards, .au .svc-args { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.au .svc-facts + .svc-note { margin-top: 14px; }
.au-quotebox { margin-top: 22px; }

@media (max-width: 860px) {
  .au-stories { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .au-row { grid-template-columns: 1fr; padding: 12px; }
  .au-total { flex-direction: column; gap: 2px; }
  .au-rows li { flex-direction: column; gap: 2px; }
  .au-rows li b { text-align: left; }
  .au-card-n { white-space: normal; }
}