/* Car Detailing & Automotive Brands (pages/ind/automotive.py): the hero's price list and package picker, and the pillar tiles.
   Every class here starts ia-. Narrow scene windows (a phone, or two tiles to a row on a tablet) get their own layouts below. */

/* ---------- hero, frame 1: the dated price list ---------- */
.p .ia-old{padding:18px 20px 16px;border:0;border-radius:4px;background:#e4e0d6;box-shadow:0 18px 40px rgba(var(--cc-k, 0, 0, 0), calc(.5 * var(--cc-ka, 1)));color:#444;font-family:Arial,Helvetica,sans-serif}
.p .ia-oh{font:700 16px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.04em;color:#3b3b3b}
.p .ia-osub{margin:5px 0 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a8478}
.p .ia-orow{display:flex;align-items:center;gap:6px;min-height:22px;padding:6px 0;border-bottom:1px dotted #a9a296;font-size:13px;color:#555}
.p .ia-orow span:first-child{white-space:nowrap}
.p .ia-orow i{flex:1;min-width:6px}
.p .ia-orow b{font-weight:700;color:#333;white-space:nowrap}
.p .ia-orow .s-tag{position:static;margin-left:4px}
.p .ia-ofoot{margin-top:10px;font:italic 700 13px Georgia,serif;color:#b0392b}
.p .ia-ask i{font-size:13px}

/* ---------- hero, frame 2: the sample site with its package picker ---------- */
.p .ia-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pitch pick" "car pick";gap:12px 18px;margin-top:16px}
.p .ia-pitch{grid-area:pitch}
.p .ia-car{grid-area:car;align-self:end}
.p .ia-carsvg{display:block;width:100%;height:auto;overflow:visible}
.p .ia-carsvg .bd{fill:#15231f;stroke:rgba(var(--cc-fg, 255, 255, 255),.4);stroke-width:1.2;stroke-linejoin:round}
.p .ia-carsvg .wn{fill:rgba(var(--cc-fg, 255, 255, 255),.1)}
.p .ia-carsvg .wh{fill:var(--cc-d-0a1311, #0a1311);stroke:rgba(var(--cc-fg, 255, 255, 255),.45);stroke-width:1.2}
.p .ia-carsvg .cv{fill:rgba(var(--cc-mint-rgb, 23, 255, 197),.3)}
.p .ia-carsvg .ce{fill:none;stroke:var(--cc-mint);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(var(--cc-mint-rgb, 23, 255, 197),.6))}
.p .ia-hl{display:block;margin-top:8px;font-size:clamp(20px,1.75vw,25px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--cc-fff, #fff)}
.p .ia-pick{grid-area:pick;display:grid;gap:7px;align-content:start}
.p .ia-pick>.s-cap{margin-bottom:1px}
.p .ia-opt{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(var(--cc-fg, 255, 255, 255),.12);border-radius:10px;background:rgba(var(--cc-fg, 255, 255, 255),.03)}
.p .ia-opt b{display:block;font-size:12.5px;font-weight:600;color:var(--cc-fff, #fff)}
.p .ia-opt small{display:block;margin-top:1px;font-size:10.5px;line-height:1.3;color:var(--cc-mute)}
.p .ia-sel{position:absolute;inset:-1px;border:1.5px solid var(--cc-mint);border-radius:10px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.06);box-shadow:0 0 0 3px rgba(var(--cc-mint-rgb, 23, 255, 197),.14);opacity:0;transition:opacity .3s}
.p .ia-sel.on{opacity:1}
.p .ia-rad{position:relative;flex:none;width:13px;height:13px;box-sizing:border-box;border:2px solid rgba(var(--cc-fg, 255, 255, 255),.35);border-radius:50%;transition:border-color .3s,background .3s}
.p .ia-sel.on+.ia-rad{border-color:var(--cc-mint);background:radial-gradient(circle,var(--cc-mint) 0 3px,transparent 3.5px)}
.p .ia-sum{display:flex;align-items:center;gap:10px;margin-top:16px;padding:9px 10px 9px 14px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.25);border-radius:12px;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.06)}
.p .ia-sum .s-p{white-space:nowrap}
.p .ia-sum b{font-size:16px;font-weight:600;color:var(--cc-fff, #fff);font-variant-numeric:tabular-nums}
.p .ia-sum .sp{flex:1}

/* ---------- tiles ---------- */
/* business strategy: three rivals, one promise; yours below */
.p .ia-riv{padding:12px 14px}
.p .ia-riv .s-h{margin-top:6px;font-size:13px;color:rgba(var(--cc-fg, 255, 255, 255), calc(.75 * var(--cc-tm, 1) + var(--cc-tc, 0)))}
.p .ia-riv .s-p{margin-top:1px;font-size:11.5px}
.p .ia-stamp{left:0;right:0;top:calc(44% + 5px);width:max-content;margin:auto}
.p .ia-you{display:flex;align-items:center;gap:14px;padding:0 16px}
.p .ia-yt{flex:1;min-width:0}
.p .ia-yt .s-h{margin-top:3px;font-size:15px}
.p .ia-edge{flex:none}
/* brand development: the van */
.p .ia-pal .id-sw{width:28px;height:28px}
.p .ia-van{display:flex;align-items:center;justify-content:center;padding:8px}
.p .ia-vsvg{display:block;width:88%;height:auto;max-height:100%;overflow:visible}
.p .ia-vsvg .sh{fill:rgba(var(--cc-k, 0, 0, 0), calc(.45 * var(--cc-ka, 1)))}
.p .ia-vsvg .bd{fill:#13211e;stroke:rgba(var(--cc-fg, 255, 255, 255),.4);stroke-width:1.2;stroke-linejoin:round}
.p .ia-vsvg .wn{fill:rgba(var(--cc-fg, 255, 255, 255),.12)}
.p .ia-vsvg .dr{fill:none;stroke:rgba(var(--cc-fg, 255, 255, 255),.14);stroke-width:1}
.p .ia-vsvg .st{fill:none;stroke:var(--cc-mint);stroke-width:4;stroke-linecap:round}
.p .ia-vsvg .nm{fill:var(--cc-fff, #fff);font-size:13px;font-weight:600;letter-spacing:-.01em}.p .ia-vsvg h3.nm{font-size:13px !important}
.p .ia-vsvg .wh{fill:var(--cc-d-0a1311, #0a1311);stroke:rgba(var(--cc-fg, 255, 255, 255),.45);stroke-width:1.2}
.p .ia-vsvg .hb{fill:rgba(var(--cc-fg, 255, 255, 255),.3)}
/* digital transformation: the path from enquiry to reminder */
.p .ia-tl{display:flex;flex-direction:column;justify-content:space-between;padding:12px 14px}
.p .ia-ln{position:absolute;left:21px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--cc-mint),rgba(var(--cc-mint-rgb, 23, 255, 197),.35));transform-origin:top}
.p .ia-st{position:relative;display:flex;align-items:center;gap:12px}
.p .ia-st .s-h{flex:1;font-size:13px}
.p .ia-nd{position:relative;flex:none;width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.55);border-radius:50%;background:var(--cc-d-0d1917, #0d1917);transition:background .3s,box-shadow .3s}
.p .ia-nd.on{background:var(--cc-mint);box-shadow:0 0 0 4px rgba(var(--cc-mint-rgb, 23, 255, 197),.16),0 0 12px var(--cc-mint)}
.p .ia-sc{flex:none}
.p .ia-msg .s-p{margin-top:6px;color:var(--cc-fff, #fff)}
/* practical AI */
.p .ia-ai{display:flex;flex-direction:column;justify-content:center}
/* Then / Now */
.p .ia-cmph{margin-top:22px;max-width:420px;font-size:34px;font-weight:600;line-height:1.08;letter-spacing:-.03em}
@media (max-width:767.98px){.p .ia-cmph{font-size:28px}}

/* ---------- narrow windows ---------- */
@container (max-width:480px){
  /* hero, frame 1: the list takes the width, the question and the verdict under it */
  .p .ia-old{padding:14px 14px 12px}
  .p .ia-oh{font-size:15px}
  .p .ia-orow{padding:5px 0}
  .p .ia-orow{font-size:12px}
  .p .ia-unc{left:auto!important;right:6%;top:auto!important;bottom:5%}
  /* hero, frame 2: the pitch beside the car, the options across the width, the price and the button under them */
  .p .ia-site{padding:14px}
  .p .ia-body{grid-template-columns:minmax(0,1fr) 36%;grid-template-areas:"pitch car" "pick pick";gap:10px 12px;margin-top:10px}
  .p .ia-car{align-self:center}
  .p .ia-hl{font-size:19px}
  .p .ia-pick>.s-cap{display:none}
  .p .ia-opt{padding:5px 10px}
  .p .ia-opt span{display:flex;align-items:baseline;gap:8px;min-width:0}
  .p .ia-opt small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .p .ia-sum{margin-top:10px;padding:7px 8px 7px 12px}
  .p .ia-clear{left:auto!important;right:7%;top:auto!important;bottom:11%}
  /* strategy: the rivals smaller */
  .p .ia-riv{padding:10px}
  .p .ia-riv .s-cap{font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
  .p .ia-riv .s-h{font-size:12px;line-height:1.25}
  .p .ia-riv .s-p{display:none}
  .p .ia-you{padding:0 12px;gap:10px}
  .p .ia-you .s-mark{width:28px;height:28px}
  .p .ia-yt .s-h{font-size:13.5px;line-height:1.3}
  .p .ia-edge{display:none}
  /* brand: smaller swatches */
  .p .ia-pal .id-sw{width:24px;height:24px}
  .p .ia-pal .s-row{gap:6px}
  .p .ia-van{padding:4px}
  .p .ia-vsvg{width:94%}
  /* journey: the path takes the width; the text message is left out */
  .p .ia-tl{left:5%!important;width:90%!important}
  .p .ia-msg{display:none}
  /* AI: the list takes the width */
  .p .ia-ai{left:5%!important;width:90%!important}
}