/* /business/digital/ | page styles, prefixed .dig-* | kit tokens only (dark mode follows the tokens) | logical properties only | no text under 13px | targets at least 44px */
.dig-grid{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
@media (min-width:640px){.dig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.dig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dig-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-5)}
.dig-card h3{margin:var(--s-2) 0 0;font-size:var(--fs-20)}
.dig-card p{margin:0;color:var(--ink-2)}
.dig-card .badge{align-self:flex-start}
.dig-flag{border-block-start:3px solid var(--gold)}
.dig-note{margin:var(--s-5) 0 0;font-weight:var(--fw-semibold);color:var(--ink);max-inline-size:var(--read-max)}
.dig-steps{list-style:none;margin:0;padding:0}
.dig-steps h3,.dig-steps p{margin:0}
.dig-n{display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:50%;background:var(--primary);color:var(--on-solid);font:var(--fw-semibold) var(--fs-15)/1 var(--font-sans)}
.dig-see{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr);margin:0;padding:0}
@media (min-width:760px){.dig-see{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dig-see-a{display:flex;align-items:center;gap:var(--s-3);min-block-size:64px;padding:var(--s-3) var(--s-4);font-weight:var(--fw-semibold);color:var(--ink)}
.dig-see-a:hover{text-decoration:none;box-shadow:var(--shadow-2)}
.dig-see-a>span:not(.feature-icon){flex:1;min-inline-size:0}
.dig-see-a .feature-icon{flex:none}
.dig-go{flex:none;color:var(--primary-ink)}
:root[dir="rtl"] .dig-go{transform:scaleX(-1)}
.dig-aud .band-head{margin-block-end:var(--s-5)}
.dig-form,.dig-ok{max-inline-size:760px}
.dig-ok h3{margin:0 0 var(--s-2)}
.dig-ok:focus{outline:none;box-shadow:var(--shadow-focus)}
.dig-ok[hidden],.dig-form[hidden],.dig-err[hidden]{display:none}
.dig-hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.dig-err{margin:var(--s-3) 0 0;padding:10px 14px;border:1px solid var(--danger-line);border-radius:var(--r-sm);background:var(--danger-bg);color:var(--danger-ink);font-size:var(--fs-15)}
.dig-send{background:var(--primary);color:var(--on-primary)}
.dig-send:hover{background:var(--primary-hover)}
.dig-form .input,.dig-form .select{min-block-size:44px}
.dig-form .check{min-block-size:44px}
.dig-form .check a{display:inline-flex;align-items:center;min-block-size:44px}
.dig-trust-h{font-size:var(--fs-16)}
.dig-trust{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin:0}
.dig-trust a{min-block-size:44px;display:inline-flex;align-items:center}
/* the questions: closed rows, the same look as the other Business pages */
.fold{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden;margin-block-start:var(--s-3)}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:14px 18px;font-weight:var(--fw-semibold);font-size:var(--fs-16);color:var(--ink);min-block-size:52px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";inline-size:10px;block-size:10px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);transform:rotate(45deg);flex:none;margin-inline-end:4px;transition:transform var(--dur-fast) var(--ease)}
.fold[open]>summary::after{transform:rotate(225deg)}
.fold>summary:hover{background:var(--card-2)}
.fold>summary:focus-visible{box-shadow:inset var(--shadow-focus)}
.fold>div{padding:0 18px 16px;color:var(--ink-2)}
.fold>div>p{margin:0;max-inline-size:var(--read-max)}
@media (prefers-reduced-motion:reduce){.fold>summary::after{transition:none}.dig-see-a:hover{box-shadow:var(--shadow-1)}}

/* the seventh offer (take over a site) is a wide card; its link opens the folded steps below */
.dig-more{align-self:flex-start;min-block-size:44px;display:inline-flex;align-items:center;font-weight:var(--fw-semibold)}
@media (min-width:640px){
  .dig-wide{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:var(--s-4);row-gap:var(--s-1);align-items:center}
  .dig-wide .feature-icon{grid-row:1 / 3;grid-column:1}
  .dig-wide h3{grid-column:2;grid-row:1;margin:0}
  .dig-wide p{grid-column:2;grid-row:2}
  .dig-wide .dig-more{grid-column:3;grid-row:1 / 3;align-self:center}
}
/* the steps of a takeover: plain lists inside the folds */
.dig-list{margin:0;padding-inline-start:1.25em;display:grid;gap:var(--s-2);max-inline-size:var(--read-max)}
.dig-get{margin:var(--s-2) 0 0;font-weight:var(--fw-semibold);color:var(--ink)}
.dig-hint{margin:var(--s-3) 0 0;font-size:var(--fs-14);color:var(--muted)}
.dig-has-fields{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.dig-has-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dig-has-fields[hidden]{display:none}
.dig-form .check input[type="checkbox"]{min-inline-size:24px;min-block-size:24px}

/* before and after: two mock sites of a made-up business, drawn in HTML and CSS. The frames keep the light tokens in dark mode (kit tokens.css, .ba-frame). */
.ba{max-inline-size:760px}
.ba-stage{position:relative;aspect-ratio:4 / 3;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--card);box-shadow:var(--shadow-1);touch-action:pan-y;cursor:ew-resize;user-select:none}
@media (min-width:640px){.ba-stage{aspect-ratio:16 / 10}}
.ba-frame{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;color:var(--ink)}
.ba-frame::before{content:"";flex:none;block-size:28px;background:var(--sidebar);border-block-end:1px solid var(--border)}
.ba-after{background:var(--card)}
.ba-n-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:10px 14px;border-block-end:1px solid var(--border)}
.ba-n-name{font:var(--fw-semibold) var(--fs-15)/1.2 var(--font-sans);color:var(--ink)}
.ba-n-btn{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--primary);color:var(--on-primary);font:var(--fw-semibold) var(--fs-14)/1.1 var(--font-sans);white-space:nowrap}
.ba-n-wa{background:var(--wa);color:var(--on-wa)}
.ba-n-call{background:transparent;color:var(--primary-ink);border:1.5px solid var(--primary)}
.ba-n-hero{flex:1;min-block-size:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 14px;background:var(--sky)}
.ba-n-h{margin:0;font:var(--fw-semibold) 20px/1.2 var(--font-serif);color:var(--ink)}
.ba-n-p{margin:0;font-size:var(--fs-14);color:var(--ink-2)}
.ba-n-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-start:4px}
.ba-n-map{flex:none;block-size:20%;display:grid;place-items:center;background:var(--sky-2);color:var(--primary-ink)}
.ba-n-map .icon{inline-size:24px;block-size:24px}
.ba-before{gap:6px;padding:0 0 10px;text-align:center;font-family:var(--font-serif);background:var(--warn-bg);border:6px ridge var(--warn-line);clip-path:inset(0 50% 0 0)}
:root[dir="rtl"] .ba-before{clip-path:inset(0 0 0 50%)}
.ba-o-title{margin:0;font:700 22px/1.1 var(--font-serif);color:var(--danger-ink);text-decoration:underline}
.ba-o-nav{margin:0;font-size:13px;color:var(--primary-ink);text-decoration:underline;letter-spacing:.04em}
.ba-o-text{margin:0;font-size:13px;color:var(--ink-2)}
.ba-before>p{padding-inline:12px}
.ba-o-pic{margin-inline:12px;flex:1;min-block-size:30px;border:2px dashed var(--muted);background:repeating-linear-gradient(45deg,var(--warn-line) 0 6px,var(--warn-bg) 6px 12px)}
.ba-tag{position:absolute;inset-block-end:8px;z-index:2;padding:0 8px}
.ba-tag::before{display:none}
.ba-tag-before{inset-inline-start:8px}
.ba-tag-after{inset-inline-end:8px}
.ba-sample{position:absolute;inset-block-start:3px;inset-inline-start:8px;z-index:2;padding:0 8px}
.ba-sample::before{display:none}
.ba-line{position:absolute;inset-block:0;inset-inline-start:50%;inline-size:4px;margin-inline-start:-2px;z-index:1;background:var(--primary);box-shadow:0 0 0 1px var(--card);pointer-events:none}
.ba-knob{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:44px;block-size:44px;margin-inline-start:-20px;margin-block-start:-22px;border-radius:50%;background:var(--primary);border:3px solid var(--card);box-sizing:border-box}
.ba-knob::before{content:"";position:absolute;inset:0;margin:auto;inline-size:14px;block-size:16px;background:repeating-linear-gradient(90deg,var(--on-solid) 0 2px,transparent 2px 6px)}
.ba-lab{display:block;margin-block-start:var(--s-3);font-weight:var(--fw-semibold);color:var(--ink)}
.ba-range{display:block;inline-size:100%;min-block-size:44px;margin:var(--s-1) 0 0;accent-color:var(--primary);cursor:pointer}
.ba-range:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ba-knob,.ba-line{transition:none}}