/* © 2026 Abderrahim El Otmani – All rights reserved. Confidential. */
/* shots.css — nexreps.com, app screen illustrations for the Help Center and the feature pages (6 Nov 2026).
   Each .shot is a drawing of a NexReps screen in its light theme, built from the app's own tokens
   (src/styles/variables.css, light): no screenshot, no customer data, text in the page's language.
   Sizes are in em and follow the frame's width (container query), so a desktop window shrinks on a phone.
   Numbered callouts (.co) point at the controls named in the article's steps. */

.shot{margin:10px 0 30px;position:relative}
.shot-cap{font-size:13px;color:var(--text-3);margin-top:10px;line-height:1.5}
.shot-cap b{color:var(--text-2);font-weight:600}

/* --- app tokens (light theme of the app, brand violet accent) --- */
.shot,.shot-phone,.shot-desk,.inst-step,.dia{
  --a-body:#f5f5f7; --a-card:#ffffff; --a-input:#f5f5f7; --a-subtle:rgba(0,0,0,.025);
  --a-t1:#1d1d1f; --a-t2:rgba(29,29,31,.7); --a-t3:rgba(29,29,31,.5); --a-t4:rgba(29,29,31,.38);
  --a-bd:rgba(0,0,0,.08); --a-bd2:rgba(0,0,0,.14); --a-div:rgba(0,0,0,.05);
  --a-acc:#7c5cc4; --a-acc-bg:rgba(124,92,196,.09); --a-acc-bg2:rgba(124,92,196,.16);
  --a-ok:#16a34a; --a-ok-bg:#dcfce7; --a-ok-t:#166534;
  --a-warn:#d97706; --a-warn-bg:#fef3c7; --a-warn-t:#92400e;
  --a-bad:#dc2626; --a-bad-bg:#fee2e2; --a-bad-t:#991b1b;
  --a-info:#2563eb; --a-info-bg:#dbeafe; --a-info-t:#1e40af;
  --a-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",sans-serif;
  --a-mono:"SF Mono",ui-monospace,Menlo,monospace;
}

/* --- frames --- */
.shot-desk{container-type:inline-size;border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;background:var(--a-body);box-shadow:0 18px 48px rgba(20,10,40,.10),0 2px 6px rgba(20,10,40,.05)}
.shot-desk .win{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#ececf0;border-bottom:1px solid var(--a-bd)}
.shot-desk .win i{width:9px;height:9px;border-radius:50%;background:#d6d6dc;display:block}
.shot-desk .win i:nth-child(1){background:#ff5f57}.shot-desk .win i:nth-child(2){background:#febc2e}.shot-desk .win i:nth-child(3){background:#28c840}
.shot-desk .win u{flex:1;text-decoration:none;text-align:center;font:500 11px/1 var(--a-font);color:#86868b;margin-right:39px}
.shot-desk .app{font-size:clamp(7px,1.85cqw,13px)}

.shot-phone{width:min(300px,100%);margin:0 auto;container-type:inline-size}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.shot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;align-items:start}
.shot-row .shot-phone{width:100%}
.phone{position:relative;border-radius:2.6em;padding:.62em;background:#1d1d1f;box-shadow:0 22px 50px rgba(20,10,40,.18);font-size:clamp(9px,4.6cqw,14px)}
.phone .scr{position:relative;border-radius:2.05em;overflow:hidden;background:var(--a-body);aspect-ratio:9/19.2;display:flex;flex-direction:column}
.phone .isl{position:absolute;top:.55em;left:50%;transform:translateX(-50%);width:32%;height:1.55em;border-radius:1em;background:#000;z-index:3}
.phone .sb{display:flex;justify-content:space-between;align-items:center;padding:.75em 1.5em .2em;font:600 .78em/1 var(--a-font);color:var(--a-t1);height:2.6em}
.phone .sb .ico{display:flex;gap:.3em;align-items:center}
.phone .sb .ico i{display:block;width:1.05em;height:.62em;border-radius:.15em;background:var(--a-t1)}
.phone .sb .ico i:first-child{width:.8em;height:.6em;border-radius:.1em;background:none;border-bottom:.2em solid var(--a-t1);border-left:.2em solid var(--a-t1)}
.phone.tablet{border-radius:1.6em;padding:.7em}
.phone.tablet .scr{border-radius:1.05em;aspect-ratio:4/3}
.phone.android .isl{width:.8em;height:.8em;border-radius:50%}

/* --- app shell --- */
.app{font-family:var(--a-font);color:var(--a-t1);line-height:1.35;text-align:left;position:relative}
.app *{box-sizing:border-box}
.app.has-side{display:grid;grid-template-columns:12.5em 1fr;min-height:31em}
.a-side{background:#fff;border-right:1px solid var(--a-bd);padding:1.1em .8em;display:flex;flex-direction:column;gap:.15em}
.a-logo{font:700 1.05em/1 var(--a-font);letter-spacing:.06em;color:var(--a-acc);padding:.2em .55em 1em}
.a-sec{font-size:.72em;text-transform:uppercase;letter-spacing:.09em;color:var(--a-t4);padding:.9em .7em .35em}
.a-nav{font-size:.92em;color:var(--a-t2);padding:.48em .7em;border-radius:.6em;display:flex;align-items:center;gap:.6em}
.a-nav::before{content:"";width:.95em;height:.95em;border-radius:.28em;border:1.5px solid currentColor;opacity:.55;flex:none}
.a-nav.on{background:var(--a-acc-bg);color:var(--a-acc);font-weight:600}
.a-nav.on::before{opacity:1}
.a-main{padding:1.4em 1.6em 1.8em;display:flex;flex-direction:column;gap:1.1em;min-width:0}
.a-top{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.a-h1{font-size:1.45em;font-weight:700;letter-spacing:-.02em}
.a-sub{font-size:.88em;color:var(--a-t3);margin-top:.2em}
.a-ctl{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.a-sel{font-size:.9em;background:#fff;border:1px solid var(--a-bd2);border-radius:.6em;padding:.45em .8em;display:inline-flex;align-items:center;gap:.6em;color:var(--a-t1);white-space:nowrap}
.a-sel::after{content:"";width:.42em;height:.42em;border-right:1.5px solid var(--a-t3);border-bottom:1.5px solid var(--a-t3);transform:rotate(45deg) translateY(-.15em)}
.a-sel.cal::before{content:"";width:.85em;height:.8em;border:1.5px solid var(--a-t3);border-top-width:3px;border-radius:.15em}
.a-sel.plain::after{display:none}
.a-in{font-size:.9em;background:var(--a-input);border:1px solid var(--a-bd);border-radius:.6em;padding:.5em .8em;color:var(--a-t3);min-width:10em}
.a-btn{font-size:.9em;font-weight:500;border-radius:.6em;padding:.5em .95em;border:1px solid var(--a-bd2);background:#fff;color:var(--a-t1);display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.a-btn.p{background:var(--a-acc);border-color:var(--a-acc);color:#fff}
.a-btn.d{color:var(--a-bad);border-color:rgba(220,38,38,.3)}
.a-btn.sm{font-size:.8em;padding:.38em .7em}

/* tabs — the app's pill track (tabs.css canon) */
.a-tabs{display:inline-flex;gap:.2em;background:rgba(0,0,0,.045);border-radius:999px;padding:.22em;font-size:.88em}
.a-tabs span{padding:.4em .95em;border-radius:999px;color:var(--a-t2);white-space:nowrap}
.a-tabs span.on{background:#fff;color:var(--a-t1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.a-tabs span em{font-style:normal;color:var(--a-t3);margin-left:.35em;font-size:.92em}
.a-tabs span.on em{color:var(--a-acc)}
.a-tabs.fill{display:flex}.a-tabs.fill span{flex:1;text-align:center}

/* cards, KPIs */
.a-card{background:var(--a-card);border:1px solid var(--a-bd);border-radius:.9em;padding:1.05em 1.15em;box-shadow:0 1px 2px rgba(0,0,0,.03);min-width:0}
.a-ch{display:flex;justify-content:space-between;align-items:center;gap:.8em;margin-bottom:.85em}
.a-ct{font-size:.98em;font-weight:600}
.a-cs{font-size:.8em;color:var(--a-t3)}
.a-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}
.a-kpis.k3{grid-template-columns:repeat(3,1fr)}.a-kpis.k2{grid-template-columns:repeat(2,1fr)}.a-kpis.k5{grid-template-columns:repeat(5,1fr)}
.a-kpi{background:var(--a-card);border:1px solid var(--a-bd);border-radius:.9em;padding:.85em 1em}
.a-kl{font-size:.7em;text-transform:uppercase;letter-spacing:.08em;color:var(--a-t3);font-weight:600}
.a-kv{font-size:1.5em;font-weight:700;letter-spacing:-.02em;margin-top:.25em;font-variant-numeric:tabular-nums}
.a-kd{font-size:.78em;margin-top:.25em;color:var(--a-t3)}
.up{color:var(--a-ok-t)!important}.dn{color:var(--a-bad-t)!important}
.a-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9em}
.a-grid3{display:grid;grid-template-columns:2fr 1fr;gap:.9em}

/* tables (tbl canon: lead column, numbers right) */
.a-tbl{width:100%;border-collapse:collapse;font-size:.86em}
.a-tbl th{font-size:.82em;text-transform:uppercase;letter-spacing:.06em;color:var(--a-t3);font-weight:600;text-align:right;padding:.55em .6em;border-bottom:1px solid var(--a-bd2);white-space:nowrap}
.a-tbl th:first-child,.a-tbl td:first-child{text-align:left;padding-left:0}
.a-tbl th.s::after{content:" ↕";color:var(--a-t4)}
.a-tbl td{padding:.62em .6em;border-bottom:1px solid var(--a-div);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-tbl td.l{text-align:left}
.a-tbl tr.tot td{font-weight:700;border-bottom:none;border-top:1px solid var(--a-bd2)}
.a-tbl tr.hl td{background:var(--a-acc-bg)}
.a-tbl td .m{display:block;font-size:.85em;color:var(--a-t3)}

/* badges, chips, dots */
.a-b{display:inline-flex;align-items:center;gap:.35em;font-size:.74em;font-weight:600;border-radius:999px;padding:.22em .65em;white-space:nowrap;background:rgba(0,0,0,.05);color:var(--a-t2)}
.a-b.ok{background:var(--a-ok-bg);color:var(--a-ok-t)}.a-b.warn{background:var(--a-warn-bg);color:var(--a-warn-t)}
.a-b.bad{background:var(--a-bad-bg);color:var(--a-bad-t)}.a-b.info{background:var(--a-info-bg);color:var(--a-info-t)}
.a-b.acc{background:var(--a-acc-bg2);color:var(--a-acc)}
.a-b.live::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--a-ok)}
.a-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.78em;border:1px solid var(--a-bd2);border-radius:.6em;padding:.2em .6em;color:var(--a-t2);background:#fff}
.a-chip b{font-weight:400;color:var(--a-t4)}
.a-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--a-ok);margin-right:.45em;vertical-align:middle}
.a-dot.warn{background:var(--a-warn)}.a-dot.bad{background:var(--a-bad)}.a-dot.off{background:var(--a-t4)}

/* lists, fields, switches */
.a-list{display:flex;flex-direction:column}
.a-li{display:flex;justify-content:space-between;align-items:center;gap:.8em;padding:.65em 0;border-bottom:1px solid var(--a-div);font-size:.88em}
.a-li:last-child{border-bottom:none}
.a-li .t{font-weight:500;display:block}.a-li .m{display:block;font-size:.85em;color:var(--a-t3);margin-top:.15em}
.a-field{display:flex;flex-direction:column;gap:.35em;font-size:.86em}
.a-field label{font-size:.85em;color:var(--a-t2);font-weight:500}
.a-field .v{background:var(--a-input);border:1px solid var(--a-bd);border-radius:.6em;padding:.5em .75em;color:var(--a-t1)}
.a-sw{display:inline-block;width:2.3em;height:1.35em;border-radius:999px;background:rgba(0,0,0,.14);position:relative;flex:none}
.a-sw::after{content:"";position:absolute;top:.17em;left:.17em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.a-sw.on{background:var(--a-acc)}.a-sw.on::after{left:auto;right:.17em}
.a-bar{height:.5em;border-radius:999px;background:rgba(0,0,0,.06);overflow:hidden}
.a-bar i{display:block;height:100%;background:var(--a-acc);border-radius:999px;width:var(--w,50%)}

/* charts: bars and a two-line hour chart */
.a-chart{display:flex;align-items:flex-end;gap:.3em;height:9em;padding-top:.6em;border-bottom:1px solid var(--a-bd)}
.a-chart i{flex:1;background:var(--a-acc);border-radius:.25em .25em 0 0;height:var(--h,40%);opacity:.9}
.a-chart i.ly{background:rgba(124,92,196,.22)}
.a-chart .pair{flex:1;display:flex;align-items:flex-end;gap:.12em;height:100%}
.a-chart .pair i{flex:1}
.a-axis{display:flex;justify-content:space-between;font-size:.7em;color:var(--a-t4);margin-top:.35em}
.a-leg{display:flex;gap:1.1em;font-size:.76em;color:var(--a-t3)}
.a-leg span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:.2em;background:var(--a-acc);margin-right:.4em;vertical-align:-.05em}
.a-leg span.ly::before{background:#dc2626;height:2px;vertical-align:.2em}
.a-svg{display:block;width:100%;height:auto}

/* modal / sheet */
.a-dim{position:absolute;inset:0;background:rgba(0,0,0,.32);z-index:4}
.a-modal{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(30em,86%);background:#fff;border-radius:1em;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:1.2em 1.3em;display:flex;flex-direction:column;gap:.85em}
.a-sheet{position:absolute;z-index:5;left:0;right:0;bottom:0;background:#fff;border-radius:1.3em 1.3em 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.15);padding:.6em 1.1em 1.4em;display:flex;flex-direction:column;gap:.75em}
.a-sheet::before{content:"";width:2.6em;height:.3em;border-radius:999px;background:rgba(0,0,0,.18);align-self:center;margin-bottom:.3em}
.a-mh{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.05em}
.a-x{width:1.6em;height:1.6em;border-radius:50%;background:rgba(0,0,0,.06);position:relative}
.a-x::before,.a-x::after{content:"";position:absolute;left:50%;top:50%;width:.75em;height:1.5px;background:var(--a-t2);transform:translate(-50%,-50%) rotate(45deg)}
.a-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.a-foot{display:flex;justify-content:flex-end;gap:.5em}

/* mobile app (m-* surfaces) */
.m-head{padding:.4em 1.1em .7em;display:flex;justify-content:space-between;align-items:flex-start}
.m-hi{font-size:.78em;color:var(--a-t3)}
.m-name{font-size:1.4em;font-weight:700;letter-spacing:-.02em;margin-top:.1em}
.m-round{width:2.1em;height:2.1em;border-radius:50%;background:#fff;border:1px solid var(--a-bd);display:inline-block;margin-left:.35em;position:relative}
.m-body{flex:1;padding:0 .9em .8em;display:flex;flex-direction:column;gap:.65em;overflow:hidden}
.m-title{padding:.3em 1.1em .6em;font-size:1.35em;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:.5em}
.m-back{font-size:.95em;color:var(--a-acc);padding:.2em 1.1em 0;display:flex;align-items:center;gap:.3em}
.m-back::before{content:"";width:.5em;height:.5em;border-left:2px solid var(--a-acc);border-bottom:2px solid var(--a-acc);transform:rotate(45deg)}
.m-card{background:#fff;border-radius:1em;padding:.8em .95em;border:1px solid var(--a-div);min-width:0}
.m-kpis{display:grid;grid-template-columns:1fr 1fr;gap:.55em}
.m-kpi{background:#fff;border-radius:1em;padding:.7em .85em;border:1px solid var(--a-div)}
.m-kpi .a-kv{font-size:1.25em}
.m-nav{display:flex;gap:.3em;align-self:center;margin:auto auto 1.2em;background:rgba(255,255,255,.96);border:1px solid var(--a-bd);border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:.35em}
.m-nav span{position:relative;display:block;width:3.2em;height:2.5em;border-radius:999px;color:var(--a-t3);text-indent:-9999px;overflow:hidden}
.m-nav span::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1.35em;height:1.35em;border-radius:.4em;border:2px solid currentColor;opacity:.7}
.m-nav span.on{color:var(--a-acc);background:var(--a-acc-bg)}.m-nav span.on::before{opacity:1}
.m-big{width:100%;border-radius:.9em;padding:.85em;text-align:center;font-weight:600;font-size:.95em;background:var(--a-acc);color:#fff}
.m-big.ghost{background:#fff;color:var(--a-t1);border:1px solid var(--a-bd2)}

/* numbered callouts */
.co{position:absolute;z-index:8;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--accent-2,#7c5cc4);color:#fff;font:700 12px/22px var(--a-font,sans-serif);text-align:center;box-shadow:0 0 0 3px #fff,0 3px 10px rgba(60,36,95,.35)}
.co.tap{width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(124,92,196,.28);border:2px solid #7c5cc4;box-shadow:0 0 0 5px rgba(124,92,196,.14)}
.co.ring{background:transparent;color:transparent;width:auto;height:auto;margin:0;border-radius:12px;box-shadow:0 0 0 2.5px var(--accent-2,#7c5cc4),0 0 0 7px rgba(124,92,196,.18)}
.steps-legend{list-style:none;margin:12px 0 0!important;padding:0;display:grid;gap:6px}
.steps-legend li{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:0!important}
.steps-legend li b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent-2,#7c5cc4);color:#fff;font:700 11px/20px var(--font-body);text-align:center;margin-top:2px}


/* tap target: the control a step names, ringed; .nb carries the step number (no pseudo-element, so any control can be ringed) */
.tgt{position:relative;z-index:6;outline:2px solid #7c5cc4;outline-offset:.24em;box-shadow:0 0 0 .5em rgba(124,92,196,.16)}
.tgt>.nb{position:absolute;top:-1.05em;left:-1.05em;width:1.7em;height:1.7em;border-radius:50%;background:#7c5cc4;color:#fff;font:700 .72rem/1.7em var(--a-font);font-size:max(.72em,9px);text-align:center;box-shadow:0 0 0 2px #fff;z-index:7;font-style:normal}
.br-ic.tgt,.a-sw.tgt,.m-round.tgt{border-radius:999px}

/* diagrams (inline SVG) */
.dia{border:1px solid var(--border);border-radius:16px;background:var(--bg);padding:18px;margin:10px 0 30px}
.dia svg{display:block;width:100%;height:auto;font-family:var(--font-body)}
.dia .d-box{fill:#fff;stroke:rgba(0,0,0,.12)}
.dia .d-acc{fill:rgba(124,92,196,.10);stroke:#7c5cc4}
.dia .d-t{fill:#1d1d1f;font-size:13px;font-weight:600}
.dia .d-s{fill:#6e6e73;font-size:11px}
.dia .d-l{stroke:#7c5cc4;stroke-width:1.6;fill:none}
.dia .d-lg{stroke:rgba(0,0,0,.25);stroke-width:1.3;fill:none;stroke-dasharray:4 4}
html[data-theme="dark"] .dia{background:#fff}

/* install steps (browser chrome, simplified and generic) */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px;margin:14px 0 30px}
.inst-step{display:flex;flex-direction:column;gap:10px}
.inst-step .shot-phone{width:100%}
.inst-step p{font-size:14px;line-height:1.5;color:var(--text-2);margin:0!important}
.inst-step p b{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--accent-2,#7c5cc4);color:#fff;font:700 11px/20px var(--font-body);text-align:center;margin-right:6px}
.br-page{flex:1;padding:1.1em 1em;display:flex;flex-direction:column;gap:.6em;background:#fff}
.br-page .ph{height:.7em;border-radius:.35em;background:rgba(0,0,0,.07)}
.br-page .ph.w6{width:60%}.br-page .ph.w8{width:80%}.br-page .ph.w4{width:40%}
.br-page .lg{font:700 1.1em/1 var(--a-font);letter-spacing:.06em;color:var(--a-acc);margin:.6em 0 .2em}
.br-bar{display:flex;align-items:center;gap:.5em;padding:.5em .7em;background:rgba(245,245,247,.97);border-top:1px solid var(--a-bd)}
.br-bar.top{border-top:none;border-bottom:1px solid var(--a-bd)}
.br-url{flex:1;background:rgba(0,0,0,.06);border-radius:.8em;padding:.45em .7em;font-size:.8em;color:var(--a-t2);text-align:center;white-space:nowrap;overflow:hidden}
.br-ic{width:1.8em;height:1.8em;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--a-t2);font-size:.9em;flex:none;position:relative}
.br-ic svg{width:1.15em;height:1.15em}
.br-menu{position:absolute;z-index:5;background:rgba(255,255,255,.98);border-radius:.9em;box-shadow:0 12px 34px rgba(0,0,0,.22);padding:.3em 0;min-width:64%;font-size:.92em}
.br-menu div{padding:.6em 1em;display:flex;justify-content:space-between;align-items:center;gap:.6em;color:var(--a-t1);border-bottom:1px solid var(--a-div)}
.br-menu div:last-child{border-bottom:none}
.br-menu div.hit{background:var(--a-acc-bg);color:var(--a-acc);font-weight:600}
.home-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1em .6em;padding:1.4em 1em;align-content:start;background:linear-gradient(160deg,#c9b8ee,#7c5cc4 55%,#3c245f)}
.home-grid span{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.55em;color:#fff}
.home-grid span::before{content:"";width:3.3em;height:3.3em;border-radius:.9em;background:rgba(255,255,255,.35)}
.home-grid span.nx::before{background:#fff url(../icons/apple-touch-icon.png) center/cover}
.home-grid span.nx{font-weight:600}

@media(max-width:620px){
  .shot-pair{grid-template-columns:1fr}
  .co{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px;line-height:18px}
}
@media print{.shot-desk,.phone{box-shadow:none}}

/* feature pages: text + illustration side by side */
.feat-shot{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.feat-shot-text h3{font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em;margin:10px 0 16px}
.feat-shot-text p{font-size:17px;line-height:1.6;color:var(--text-2);margin-bottom:18px}
.inst-lead{font-size:16px;line-height:1.6;color:var(--text-2);margin:8px 0 4px;max-width:70ch}
.inst-lead a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
section .h-2[id]{scroll-margin-top:90px;margin-top:48px}
@media(max-width:900px){.feat-shot{grid-template-columns:1fr;gap:36px}}

/* inside Help Center articles: the prose styles must not reach the drawings */
.hc-prose .a-tbl{font-size:.86em;margin:0}
.hc-prose .a-tbl th{font-size:.82em;color:var(--a-t3);border-bottom:1px solid var(--a-bd2);padding:.55em .6em}
.hc-prose .a-tbl td{border-bottom:1px solid var(--a-div);padding:.62em .6em}
.hc-prose .a-tbl th:first-child,.hc-prose .a-tbl td:first-child{padding-left:0}
.hc-prose .shot p,.hc-prose .dia p{margin:0}
.hc-prose .shot ul,.hc-prose .shot ol:not(.steps-legend){margin:0}
.hc-prose .shot strong{color:inherit}

/* phones: a desktop drawing keeps a readable size and scrolls sideways instead of shrinking */
@media(max-width:620px){
  .shot-desk{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot-desk .app{font-size:10.5px;min-width:600px}
  .shot-desk .win{min-width:600px}
  .shot-desk + .shot-cap::before,.shot-desk ~ .steps-legend::before{content:"← swipe the picture →";display:block;font-size:11px;color:var(--text-3);margin:-2px 0 6px}
}
@media(max-width:620px){.dia{overflow-x:auto}.dia svg{min-width:560px}}
@media(max-width:620px){html[lang="fr"] .shot-desk + .shot-cap::before,html[lang="fr"] .shot-desk ~ .steps-legend::before{content:"← faites glisser l’image →"}}