/* ============================================================================
   Mobile and tablet only. Every rule in this file lives inside a media query,
   so the desktop layout above 940px is untouched by design, not by accident.
   The one exception is .navtog, a new element that is hidden until asked for.
   ========================================================================= */
.navtog{display:none}

@media(max-width:940px){

  /* ---- the bar itself ---- */
  .nav-i{height:58px;gap:12px;position:relative}
  /* the first fold is the hero alone on a phone as well: it fills the viewport
     under the 58px bar and centres its type, so the next section starts below the fold */
  .hero2{min-height:calc(100vh - 58px);min-height:calc(100svh - 58px);display:flex;flex-direction:column;
    justify-content:center;box-sizing:border-box}
  /* the headline is two lines on a phone: the first line, "Make any change to your",
     has to fit in one, so the size follows the width. The script leaves out the words
     that would not fit and holds the line, so it never becomes three lines */
  .hero2-c h1{font-size:clamp(26px,9vw,40px)}
  .csx{min-height:calc(100vh - 59px)}
  .brand{font-size:16px;white-space:nowrap;--bm:22px}
  .navtog{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:42px;height:42px;padding:0 9px;background:none;border:0;cursor:pointer}
  .navtog span{display:block;height:1.5px;background:var(--ink);transition:transform .22s ease,opacity .18s ease}
  .nav[data-nav="open"] .navtog span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav[data-nav="open"] .navtog span:nth-child(2){opacity:0}
  .nav[data-nav="open"] .navtog span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* ---- the panel ---- */
  .nav nav{position:fixed;left:0;right:0;top:58px;bottom:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 32px;
    background:var(--paper);overflow-y:auto;font-size:17px}
  .nav[data-nav="open"] nav{display:flex}
  .nav nav>a{padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav nav .btn{margin:0;width:100%;padding:14px 18px;font-size:15.5px}
  .nav nav>a:not(.btn)+a.btn{margin-top:24px}
  .nav nav .btn+.btn{margin-left:0;margin-top:10px}
  .navitem{width:100%;justify-content:space-between;padding:15px 0;font-size:17px;
    border-bottom:1px solid var(--line)}

  /* the two dropdowns open in place instead of floating */
  .mega{position:static;display:block;max-height:0;overflow:hidden;flex:none;width:100%;
    transition:max-height .3s ease;background:none;border:0;box-shadow:none}
  .navitem{order:0}
  /* The Use cases menu carries a For whom group now, so the in place
     accordion needs room for two more rows and a label. 640px cut the
     last item off. */
  .mega[data-open="true"]{max-height:900px}
  .mega-s .mega-i{padding:0}
  .dd{width:auto;margin-left:0!important;border:0;background:none;box-shadow:none;padding:2px 0 10px}
  .dd a{padding:11px 0 11px 14px}
  .dd a:hover{background:none}
  .dd a b{font-size:15.5px}
  .dd-sep{margin:6px 0 6px 14px}
  .dd-all{padding-left:14px}

  /* ---- page rhythm ---- */
  .sec{padding:clamp(40px,9vw,58px) 0}
  .hd{grid-template-columns:1fr;gap:14px;align-items:start}
  .hd .r{padding-bottom:0}
  h1{letter-spacing:-.03em}
  .lede{font-size:16.5px}

  /* ---- section primitives ---- */
  .kpi{grid-template-columns:1fr;border-top:1px solid var(--ink)}
  .kpi div{padding:20px 0 18px!important;border-right:0;border-bottom:1px solid var(--line)}
  .kpi div:last-child{border-bottom:0}
  .steps4,.cols3{grid-template-columns:1fr}
  .steps4 div,.cols3>div{padding:22px 0 20px!important;border-right:0;border-bottom:1px solid var(--line)}
  .steps4 div:last-child,.cols3>div:last-child{border-bottom:0}
  .cols3 img{aspect-ratio:16/9}
  .imgtext,.figpair,.cards2,.frow,.swx{grid-template-columns:1fr;gap:18px}
  .imgtext.flip>figure{order:0}
  .frow.flip>*:first-child{order:0}
  .tline .r0{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .tline .t{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
  .tline .d{display:none}
  .lst-r{grid-template-columns:26px 1fr;row-gap:6px;padding:18px 0}
  .lst-p,.lst-m{grid-column:2}
  .lst-m{text-align:left;margin-top:2px}
  .big{gap:10px}
  .quote p{font-size:19px}

  /* tables scroll rather than squeeze */
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap table{min-width:520px}

  /* ---- the product demos ---- */
  .dmo{padding:12px}
  .dmo-in{gap:12px}
  .dw-h{padding:10px 12px;font-size:12px}
  .wr{padding:9px 12px;gap:8px;flex-wrap:wrap}
  .wr .l{font-size:12px;white-space:normal;flex:1 1 100%}
  .wr .n{margin-left:0;font-size:10.5px}
  .wr .pill{margin-left:auto}

  /* The package table reserved 252px of fixed columns for from/arrow/to/result,
     which leaves about 70px for the package name on a 390px phone. Every name
     truncated to a stub ("mag...", "amas...", "klarn..."), and the PACKAGE
     header, being wider than its own column, printed on top of FROM as
     "PACKAGEROM". The name now takes its own line and the versions sit beneath
     it, so both are readable. */
  .sv-rows .sv-pk{grid-template-columns:auto 14px auto 1fr;row-gap:2px}
  .sv-rows .sv-pk>:first-child{grid-column:1/-1;white-space:normal;
    overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  /* With the name on its own line the four column header no longer lines up
     with anything, and "2.4.6 -> 2.4.9  clean" needs no header to be read. */
  .sv-rows .sv-hd0{display:none}

  /* The rows start at opacity 0 and only appear once the section has been
     marked 'ap'. On a phone the panel swaps in before that, so the table shows
     its header and its footer totals around a blank white column for a couple
     of seconds, which reads as a table that failed to load. The same call was
     already made for the comparison bars: on mobile the content is simply
     there. */
  .shc .sv-rows .sv-row{opacity:1;transform:none}
  .dw-f{padding:9px 12px;gap:8px;font-size:10px}
  .dfx div{padding:9px 12px;flex-wrap:wrap}
  .dfx em{margin-left:22px;width:100%}
  .mx{font-size:11.5px}
  .mx th,.mx td{padding:9px 8px}
  .term{font-size:10.5px;line-height:1.8;padding:12px}
  .cwin{grid-template-columns:1fr 1fr;gap:7px;padding:8px}
  .dlive{flex-wrap:wrap;gap:8px}
  .dlive span{margin-left:0;text-align:left;width:100%}
  .dmo-cap{font-size:9.5px}

  /* the switcher becomes a stack, since there is no room for a side rail */
  .swx-l{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch}
  .swx-i{padding:10px 14px 12px;margin-left:0;border-left:0;border-bottom:2px solid transparent;
    white-space:nowrap}
  .swx-i b{font-size:14.5px}
  .swx-i span{display:none!important}
  .swx-i[aria-selected="true"]{border-left-color:transparent;border-bottom-color:var(--ink)}


  /* ---- components that only exist on the homepage ---- */
  .fb-l h2{max-width:none}
  .trust{grid-template-columns:1fr}
  .trust>div{padding:24px 0 22px!important;border-right:0;border-bottom:1px solid rgba(243,241,234,.16)}
  .trust>div:last-child{border-bottom:0}

  /* the cost and time comparison: chart above, argument below */
  .stp{grid-template-columns:1fr;gap:24px}
  .stp>.vch,.stp>.tml,.stp>.ar{order:2}
  .stp-t{order:1}
  .vch{height:230px;padding:0;gap:16px}
  /* The bars are drawn only once a scroll observer marks the section, and on a
     phone that mark was not arriving: the comparison rendered as an empty gap
     under a "10 times cheaper" claim, which is worse than no chart at all. On
     mobile the bar takes its value directly, so the chart is correct whether
     or not the observer ever fires. It still animates when it does. */
  .vch-b{height:var(--h)}
  /* Desktop reserves equal label height so both bars sit on one baseline.
     Mobile was setting it to zero, so a two line label pushed its bar up and
     a one line label did not: the bars ended up 29px apart. Reserve the same
     space on both sides here too. */
  .vch-l{min-height:3.4em;font-size:12px}
  /* Narrower than about 380px the longest label takes a third line, which is
     taller than the reserve and puts the bars 3px out. Give it the extra line
     only where it is needed. */
  @media(max-width:380px){.vch-l{min-height:4.4em}}
  .vch-v{font-size:15.5px;margin-bottom:8px}

  /* The agent's work log. On desktop each line is text on the left and the
     figure it touched on the right. At phone width the text wraps to two lines
     while the figure stays pinned to the right of the first, which reads as two
     unrelated columns colliding. Dropping the figure onto its own line under
     the text keeps both facts and the association between them. */
  .sh-log li{grid-template-columns:7px 1fr;row-gap:2px}
  .sh-log li .t{grid-column:2;font-size:10.5px}

  /* The "NEW" flags on the product mock hang above their block at top:-7px.
     With desktop's roomier stack that clears the row above; on a phone the
     rows sit tight and each flag lands on the line above it. Give the flagged
     blocks the clearance the flag needs rather than moving or dropping it —
     the flag is the whole point of the mock. */
  .pdp-row.pdp-new,.pdp-line.pdp-new{margin-top:16px}
  /* The delivery line is one flowing sentence that runs the full width, so its
     own flag lands on top of the end of it. Push the text down past the flag
     rather than shortening the sentence. */
  .pdp-line.pdp-new{padding-top:12px}
  .pdp-new::after{font-size:9px;padding:2px 4px}

  /* The bundle price is pinned right by margin-left:auto. Once the row wraps
     it lands alone on a line, still pushed against the card edge and clipped.
     Let it sit where the row put it. */
  .pdp-save{margin-left:0}

  /* the showcase window, stacked */
  .shc{flex-direction:column}
  .sh-l{flex:0 0 auto;border-right:0;border-bottom:1px solid rgba(243,241,234,.12)}
  .sh-me,.sh-ag,.sh-done{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .sh-thread{min-height:0}
  .ag-grid{grid-template-columns:1fr 1fr!important}
  .sh-tabs{flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1px solid var(--line)}

  /* ---- the hero film: landscape, not a portrait tower ----
     Stacking the two panes made a 350x560 box that ate the whole phone screen
     before a single section had been read. Keeping them side by side gives a
     landscape card that sits in the flow, and both panes stay on screen, which
     is the point of the film — the ask and the store move together. Type comes
     down to pay for it. */
  /* One panel at a time, the same rule the rest of the demos follow. Side by
     side gave each half of the film about 170px and the storefront lost its
     right edge. The film says which half is working through data-focus, so the
     phone shows that one full width and cross fades to the other. */
  .hd2{display:block;position:relative;height:clamp(300px,80vw,360px)}
  .hd2-l,.hd2-r{position:absolute;inset:0;width:auto;
    transition:opacity .42s ease,visibility 0s linear .42s}
  .hd2-l{padding:12px;border-right:0;border-bottom:0}
  /* Only ever hide the panel that is not working. Forcing the other one
     visible overrode the film's own opening, so the title card and the
     composer were drawn on top of each other for the first few seconds. The
     film already knows what the active panel should look like in each act. */
  .hd2[data-focus="store"] .hd2-l,
  .hd2[data-focus="chat"] .hd2-r,
  .hd2:not([data-focus]) .hd2-r{opacity:0;visibility:hidden;pointer-events:none}
  .hd2-thread{gap:6px;padding-bottom:8px}
  .hd2-box{padding:9px 10px}
  .hd2-box p{font-size:11px;min-height:2.4em}
  .hd2[data-act="2"] .hd2-box p{font-size:11.5px;min-height:4.2em}
  .hd2-box .bar2{margin-top:6px}
  .hd2-tools button,.hd2-box .snd2{width:21px;height:21px}
  .hd2-tools svg{width:12px;height:12px}
  .hd2-box .snd2 svg{width:10px;height:10px}
  .hd2-steps li{font-size:11px}
  .hd2-title b{font-size:clamp(15px,4.4vw,19px)}
  .hd2-cap b{font-size:clamp(12.5px,3.6vw,16px)}
  .hd2-rmid b{font-size:clamp(28px,9vw,42px)}
  /* This is a sentence a visitor is meant to read, not a label inside the
     simulated storefront, and 10.5px is below what anyone reads on a phone. */
  .hd2-rmid span{font-size:12.5px;line-height:1.45}
  .hd2-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:0 8px}
  .hd2-fil{gap:4px;padding:0 8px 6px}
  .hd2-fil span{font-size:8.5px;padding:2px 5px}
  .hd2-t h6{font-size:9.5px}
  .hd2-ti{padding:5px 6px 6px}

  /* The simulated storefront was drawn for a desktop panel and does not fit a
     phone. Three things were broken at 390px:

     The shop nav wrapped inside its own labels, so the header read "New / in"
     and "Bag / (0)". Nothing wraps now, and the middle link is dropped rather
     than squeezed, because three links prove a shop just as well as four.

     The product tile is 237px tall in 144px of grid, so the name and the price
     sat entirely below the panel and were never visible. The prompt asks for
     the old price crossed out, and that crossed out price is the whole proof
     the change landed, so it has to be on screen: the image is shorter and the
     tile now fits.

     The sale banner truncated to "25% off all ...". It wraps to a second line
     instead. */
  .hd2-sh{gap:8px;padding:10px 10px 9px}
  .hd2-sh b{font-size:11px}
  .hd2-sh nav{gap:9px}
  .hd2-sh nav span,.hd2-sh>span{white-space:nowrap;font-size:10.5px}
  .hd2-sh nav span:nth-child(3){display:none}
  /* Sized against .hd2-win, the box that actually clips, not the panel behind
     it. A square image left the price row 16px below the cut. */
  .hd2-t img{aspect-ratio:5/4}
  /* Still 16px too tall. The units sold line is the least load bearing part
     of the tile, and dropping it is what lets the crossed out price fit. */
  .hd2-ti .un{display:none}
  .hd2-ti{padding:4px 6px 5px}
  .hd2-bd2{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

  /* tables fit instead of scrolling off the edge */
  .tblwrap table{min-width:0}
  .tblwrap th,.tblwrap td{padding-left:0;padding-right:10px;font-size:13.5px}
  .tblwrap td:first-child,.tblwrap th:first-child{padding-right:14px}

  /* ---- meet agent: give the window a box to draw in ----
     The connect panel at step 1 is positioned absolute against .mg, and the
     mobile rule dropped .mg's min-height to 0. With the right pane hidden at
     that step the window collapsed to the height of an empty thread, 158px,
     and clipped a 434px panel — which is why the store URL card was sliced
     through the middle.

     One box for all four steps, tall enough for the tallest of them: the
     absolute panel at step 1, and the thread stacked above the storefront at
     step 3. Fixed rather than per-step so the window does not resize under you
     as the sequence advances, which is the same reason the hero film is fixed.
     Steps 1 and 2 already show the chat alone and step 4 the storefront alone,
     so the sequence reads chat first, result after, without hiding anything
     that was not already hidden. */
  .mg{min-height:clamp(480px,130vw,512px)}
  /* The panel was absolute, so it could never push the window taller and any
     width where it needed more room simply cut it off. In the flow it sizes
     the window itself and cannot be clipped at any width. */
  .mg-conn{position:static;inset:auto;width:100%;flex:1 1 auto;align-content:center}
  .mg[data-s="1"] .mg-conn{display:grid}
  /* The chat pane is invisible at step 1 but still a growing flex item, so it
     took half the free space and the connect panel sat above centre with 157px
     of empty wash under it. Take it out of the layout for that step. */
  .mg[data-s="1"] .mg-l{display:none}
  /* The pane sized to its content and left the rest of the box as empty
     wash, so the composer floated at the top of a 500px panel. Fill the box:
     the thread grows and the composer sits on the floor, as on desktop. */
  .mg-l{padding:13px;flex:1 1 auto}

  /* Stacking thread above storefront pushed the box to 655px and made it grow
     mid sequence. On a phone the two are shown one after the other instead:
     the ask at steps 1 and 2, the store it changed at steps 3 and 4. Same
     content, told in order, and the box holds still. */
  .mg[data-s="3"] .mg-l,.mg[data-s="4"] .mg-l{display:none}
  .mg[data-s="3"] .mg-r,.mg[data-s="4"] .mg-r{flex:1 1 auto;min-height:0}
  .mg-conn-c{padding:16px}
  .mg-conn-f{margin-top:11px;padding-bottom:11px}
  .mg-conn-l{margin-top:12px}

  /* the step strip pays for that height */
  .mg-step{padding:8px 0 0}
  .mg-step b{font-size:9px}
  .mg-step h3{margin-top:3px;font-size:13.5px}

  /* ---- what you can change: the section has to fit a phone screen ----
     Six tabs each carrying a description, stacked above a full-height window,
     ran to 1614px — twice a phone viewport, so the tabs and the thing they
     change were never on screen together and the control read as a list.
     Descriptions belong to the selected tab only; the others keep their title,
     which is what you choose from. Nothing is removed: selecting a tab still
     shows its line.

     The strip is a flex row, not the grid the rule higher up in this file
     assumed, so grid-auto-flow was inert and six tabs kept squeezing side by
     side into 350px. Say display outright. */
  .sh-tabs{display:block;overflow-x:visible;grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .shitem{padding:11px 0;border-bottom:1px solid var(--line)}
  .shitem:last-child{border-bottom:0}
  .shitem h3{font-size:14.5px}
  .shitem p{display:none}
  .shitem[aria-selected="true"] p{display:block;margin-top:4px;font-size:12.5px;line-height:1.45}

  /* This window has no step sequence to hand a pane to, so a fixed box could
     only be paid for by cutting one. It was: the product mock lost 377px and
     its title landed on the photo. The window sizes to its content instead.
     The section is taller than a phone screen and that is the right trade —
     a section you scroll reads better than a mock sliced in half. */
  .shc{height:auto;min-height:0}
  /* Sized down rather than cut. The mock keeps every element it has on
     desktop; the photography and type simply run at phone scale, which is
     what pulls the section back toward one screen without slicing anything. */
  .pdp-gal{grid-template-columns:42px minmax(0,1fr);gap:7px;padding:10px}
  .pdp-hero{max-height:210px}
  .pdp-info{padding:0 10px 12px}
  .ag-grid figure{max-height:132px}
  .sh-l{padding:12px}
  .sh-l,.sh-r{min-height:0}
  .sh-l{flex:0 0 auto}
  .sh-r{flex:0 0 auto}

  /* ---- the pipeline reads left to right, like the run it describes ----
     Turning it vertical on a phone made six stacked rows out of one bar and
     lost the sense of a run with a front edge. All six stages fit the width
     rather than scrolling: a rail you have to drag shows two and a half
     stages and reads as cut off, which is the same failure in a different
     direction. Type shrinks and the sub-labels wrap. */
  /* Keep the seven explicit columns desktop uses. Switching to an implicit
     column flow left the closing line with no full-width track to span, so it
     stacked into a 60px column. The count is --n, set on the rail in hero.css;
     six columns here after the seventh stage arrived wrapped "production"
     onto a row of its own. */
  .pip-rail{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;
    padding:20px 0 2px;column-gap:7px;row-gap:0}
  .pip-rail::before{left:6px;right:calc((100% - (var(--n) - 1) * 7px) / var(--n) - 6px);
    top:5px;width:auto;height:2px;bottom:auto}
  .pip-rail>i{left:6px;top:5px;height:2px;width:auto;
    right:calc((100% - (var(--n) - 1) * 7px) / var(--n) - 6px);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .55s ease}
  .pip-node::before{left:0;top:-21px;width:12px;height:12px}
  .pip-node b{font-size:9.5px;line-height:1.2;letter-spacing:-.005em}
  .pip-node em{font-size:8px;line-height:1.3;margin-top:3px}
  .pip-brace{grid-column:1/-1;margin-top:14px;margin-left:0}

  /* ---- store-type cards: shorter, otherwise as on desktop ----
     Closed is the design; a tap opens one (the script sets .open, since iOS
     does not focus a tapped button). The rest of the card keeps the desktop
     layout: the rules that once restated it here were written for a photo
     card that no longer exists, made the card a block with a zero-height
     picture, and left the interface floating on bare paper. */
  .vcard{height:clamp(360px,95vw,430px)}

  /* ---- certification marks: align the marks, not their bounding boxes ----
     The three marks have different aspect ratios, so object-fit centered each
     one inside its 46px box and their left edges landed three pixels apart
     down the column. Pin them left and the column reads straight. Stacked,
     the rows also kept the left padding that separated them as columns, so
     every row after the first started 18px further in than the one above. */
  .certs .mk{width:40px;height:40px;place-items:center start}
  .certs .mk img{object-position:left center}
  .certs .mk svg{width:24px;height:24px}
  .certs>div{gap:13px;align-items:start;padding:20px 0}
  .certs>div+div{padding-left:0}

  /* ---- demos run as stages, one panel at a time ----
     Side by side gives each panel half of 350px and the store chrome loses its
     right edge. A swipe rail was no better: two panels are still on screen at
     once, which is the thing to avoid.

     So below 940px a demo frame becomes a stage sequence, the way the hero
     film already works. The panels stack on top of each other in a fixed
     frame and cross fade on a timer, so exactly one is ever visible. The
     script in the footer drives it and only while the frame is on screen;
     without it the panels simply sit as built, so nothing depends on JS to be
     readable. */
  /* Without the script, or where a frame holds only one panel, the columns
     still have to collapse or they squeeze. One column, keep the gap. */
  .dmo-in.dm-two,.dmo-in.dm-three,.dmo-in.dm-side{
    grid-template-columns:minmax(0,1fr);gap:12px}
  /* The frame used to be a fixed height that had to suit every panel at once,
     so it suited none: the chat panel needed 452px and was cut off at 406px,
     while the product panel only filled 234px and left 172px of dead space
     under it. Now that exactly one panel is ever displayed, none of them need
     to be stacked, so the frame simply takes the height of whichever panel is
     showing. */
  /* A fixed box, sized to the tallest stage rather than to a guess. Letting the
     frame follow each panel meant it jumped 454 -> 264 -> 524 inside a single
     use case, while the sentence above it never changed: the section appeared
     to detonate for no reason. Measured across 360, 390 and 430px, every stage
     fits in 524px, so nothing is cut and nothing moves. */
  /* The script measures the tallest panel and sets the height inline. This is
     only the fallback for the moment before it runs, and if it never runs the
     frame grows rather than clipping. */
  .shc[data-stages],.dmo-in[data-stages]{
    position:relative;display:block;height:auto;
    /* A floor, so the frame starts near its final size instead of climbing to
       it. The homepage section holds several use cases of different lengths and
       the script only learns the tallest by cycling through them, which was five
       expansions on first view. Starting at the floor makes that one or two.
       The script still grows past this whenever a panel needs more, so the floor
       can never clip anything. */
    min-height:clamp(420px,132vw,560px);
    /* The frame settles at the tallest panel within the first cycle, but one
       panel fills its log line by line, so it grows twice on the way there.
       Easing turns two snaps into two expansions. After that it never moves. */
    transition:height .38s cubic-bezier(.33,1,.68,1)}
  /* These panels are dense product mockups, not photographs. Cross fading two of
     them meant that for half a second both were genuinely on screen at once, so
     a chat, a checklist and a product page appeared stacked and ghosted over
     each other. It also has to composite two full size layers every frame,
     which is what made it feel laggy on a phone.
     A hidden panel is now display:none, so it costs nothing and can never be
     seen. Only the arriving panel animates, and it animates alone. */
  .stg-pane{display:none;width:auto;height:100%;
    border-right:0;border-bottom:0;overflow:auto;scrollbar-width:none}
  .stg-pane::-webkit-scrollbar{display:none}
  @keyframes stg-in{from{opacity:0}to{opacity:1}}

  /* A panel whose content will not fit the width scrolls rather than hiding
     the tail of it. Same rule the tables on these pages already follow. */
  .dw{min-height:0;overflow-x:auto;scrollbar-width:none}
  .dw::-webkit-scrollbar{display:none}
  /* The product panel is 264px inside a 524px box. Centered it reads as a card
     in a frame; top aligned it reads as a page that failed to load. */
  .stg-pane.on{display:grid;align-content:center;animation:stg-in .26s ease both}

  /* The mock's own panel squeezes its copy block to fit the frame, so the
     squeeze happens a level below the pane. Let the block take its height and
     the pane carry the scroll. */
  .shc .sv-pnl{overflow-y:auto;scrollbar-width:none}
  .shc .pdp-info{flex:none;min-height:0;overflow:visible}

  /* Between 820 and 940 the window was still a row, which is the band the
     squeezed screenshots came from. Close it. */
  .mg{flex-direction:column}
  .mg-r{flex:1 1 auto;min-height:0}

  /* A chip's text is wider than the panel it sits on at the narrowest width,
     so its tail was cut. Let it wrap inside the panel instead. */
  .viz .viz-chip{max-width:calc(100% - 18px);white-space:normal}


  /* The progress bar under each step is driven by --dwell and the script's own
     clock, so both move together. */
  .mgw{--dwell:5.6s}

  /* The gallery row is shorter than the image inside it, so the photo hung 31px
     past its own container and sat on top of the product name. Let the image
     define the row instead of a height it cannot honour. */
  /* The gallery was compressed below its own content, so the photo hung past
     it and landed on the product name. Giving the image a free aspect ratio
     then swung the other way and ate the whole panel. Fix the row instead:
     the gallery gets a definite height, the photo fills it, and the copy block
     below keeps its own. */
  .shc .sv-pnl.pdp{min-height:auto}
  .shc .pdp-gal{flex:none;min-height:auto;grid-auto-rows:clamp(180px,46vw,224px)}
  .shc .pdp-hero{max-height:none;min-height:0;height:100%}
  .shc .pdp-hero img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .shc .pdp-thumbs{min-height:0}

  /* Before the change lands, the parts it will add are invisible but still
     hold their space, so the product page shows a white hole between the
     color swatches and Add to bag. That reads as broken, not as "before".
     Take them out of the flow until they exist, so the store looks like an
     ordinary product page and the change visibly adds to it. */
  .shc:not(.ap) .pdp-new{display:none}

  /* Mobile shows only the part of the store that actually changes. The photo
     gallery is the largest thing in the product panel and none of it changes,
     so on a phone it goes: what is left is the block the chat asked about,
     framed the same way before and after, with the new rows appearing in
     place. Showing the whole page instead meant the before and after were
     framed differently and read as two separate views. */
  .shc .pdp-gal{display:none}
  .shc .sv-pnl.pdp{justify-content:center}
  .shc .pdp-info{padding:14px 14px 16px}
  /* The copy block is longer than any compact frame can show, so the panel
     scrolls. A hard edge there reads as something broken, so the scrollable
     panels fade out at the bottom to say there is more. */
  .shc .sv-pnl{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
  .shc .pdp-info{padding:10px 12px 16px;gap:2px}
  .shc .pdp-info h4{font-size:15px}

  /* A thread that packs to the bottom pushes its overflow off the top edge,
     where it is clipped and unreachable. On a phone it reads from the top and
     the pane carries the scroll. */
  .shc .sh-thread,.mg-thread{justify-content:flex-start;overflow:visible;min-height:0}

  /* ---- closing panel and footer ---- */
  .panel{padding:26px 20px}
  .panel .hd{gap:22px}
  .ctab-b{flex-direction:column;align-items:stretch}
  .ctab-b .btn{width:100%}
  .foot2-cols{grid-template-columns:1fr 1fr;gap:22px}
  /* 13.5px text with 5px padding is a 32px tap target, which is under the 44px
     a thumb actually needs. The footer is the densest set of links on the site,
     so this is where mis-taps happen. Desktop keeps the tighter spacing. */
  .foot2-cols a{padding:11px 0}
  .foot2-base{gap:14px}
  /* Privacy, Terms and Cookies were 20px tall with no padding at all, the
     smallest tap targets on the site, and they sit next to each other. */
  .foot2-base a{display:inline-block;padding:12px 0}
  .foot2-badges{margin-left:0;width:100%;gap:18px;flex-wrap:wrap}
  .foot2-badges img{height:30px}
}

@media(max-width:560px){
  .foot2-cols{grid-template-columns:1fr}
  .cwin{grid-template-columns:1fr 1fr}
  .kpi b{font-size:28px}

  /* The hero pair wraps below 400px and each button then sizes to its own
     label, so the primary and secondary actions land at two different widths
     under each other — the one place on the page where sloppiness is most
     visible. Stretch both instead of letting content decide. */
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%}
}

@media(max-width:940px){
  .cols3 .viz,.cols3 img{height:clamp(170px,42vw,230px)}
  /* the hero band is short on a phone: the caption carries it alone */
  .bandimg .uic,.bandimg .uic-ask{display:none}
  /* inside a generated panel the fragment stays, just smaller */
  .viz .uic,.viz .uic-ask{width:min(88%,340px)!important;left:6%!important;right:auto!important}
}

@media(max-width:940px){
  /* A story is already one column, so it mostly needs air taken out rather than
     layout changed. The index stacks. */
  .art-h h1{font-size:clamp(27px,7.4vw,34px)}
  .art-sf{font-size:15.5px}

  /* a fragment of the product is still readable at a phone width */
  .uic-frag,.uic-chat{width:min(80%,300px) !important}
  .uic-chat .ucx-me{font-size:11.5px}
  .art-b{font-size:16px;line-height:1.68}
  .art-b h2{font-size:20px}
  .art-q p{font-size:18px}
  .art-au{gap:13px}
  .nw{grid-template-columns:1fr;gap:16px}
  .nw-c:first-child b{font-size:24px}
  .nw-c:first-child .nw-i img{aspect-ratio:16/9}
}

@media(max-width:940px){
  .art-t table{font-size:14px}
  .art-t td{padding:11px 0}
}

@media(max-width:560px){
  /* The change rows truncate both halves on a phone, so "Magento 2.4.6 to
     2.4.9" reads "Magento 2.4.6..." and the version it moves to, which is the
     whole point of the row, is the part that disappears. Let the row use two
     lines instead of an ellipsis. */
  .ax-c{align-items:flex-start}
  .ax-c>.ax-d{margin-top:7px}
  .ax-c>.ax-b{margin-top:1px}
  .ax-ct{flex-wrap:wrap;white-space:normal;row-gap:2px}
  .ax-ct b{overflow:visible;text-overflow:clip}
  .ax-ct em{flex:1 0 100%;overflow:visible;text-overflow:clip}
}

@media(max-width:940px){
  /* the menu's link rule reached the buttons: dark text on the green one, a
     lighter bottom edge on the outline one */
  .nav nav a.btn:not(.btn-o){color:#F3F1EA;border:1px solid var(--green)}
  .nav nav a.btn.btn-o{color:var(--ink);border:1px solid var(--line2)}
}

/* ---- phone only: demos landscape with the lists under them, cards that open
   under a finger, the galaxy text readable ---- */
@media(max-width:700px){
  /* How it works: the window first, landscape; the four steps under it with
     their lines below, and everything in the window at phone scale */
  .mgw{display:flex;flex-direction:column}
  .mg{order:1;margin-top:0;height:auto;min-height:0;aspect-ratio:3/2}
  .mg-steps{order:2;margin-top:12px;border-top:0;gap:0}
  .mg-step{padding:9px 0;border-bottom:1px solid var(--line)}
  .mg-step::before{top:auto;bottom:-1px}
  .mg-step b{font-size:9px}
  .mg-step h3{margin-top:2px;font-size:13.5px}
  .mg-conn,.mg-l,.mg-r,.mg-live{zoom:.72}
  .mg-l,.mg-r{padding:12px}
  .mg[data-s="2"] .mg-box p{font-size:15px;min-height:2.6em}
  /* What you can change: the window first, the list under it */
  .sh-lay{display:flex;flex-direction:column;gap:0}
  .shc{order:1}
  .sh-tabs{order:2;margin-top:12px;border-top:0;border-bottom:0}
  .shitem,.shitem:last-child{padding:10px 0;border-bottom:1px solid var(--line)}
  .shitem::before{top:auto;bottom:-1px}
  /* the galaxy sits smaller and higher; the words keep their own ground */
  .tb-k,.tb-b,.tb-s,.tb-n{text-shadow:0 0 12px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9)}
  /* What you can change: chat and preview side by side as on desktop,
     landscape, everything at phone scale */
  .shc{flex-direction:row;height:auto;min-height:0;aspect-ratio:4/3;width:100%;align-self:stretch}
  .sh-l{flex:0 0 46%;border-right:1px solid rgba(243,241,234,.12);border-bottom:0;padding:10px;zoom:.55}
  .sh-r{flex:1 1 0;min-width:0;min-height:0;zoom:.58}
  .shc .sh-thread{overflow-y:auto;scrollbar-width:none;justify-content:flex-start;padding-bottom:6px;gap:8px}
  .shc .sh-thread::-webkit-scrollbar{display:none}
  .shc .sh-box p{min-height:1.4em}
  .shc .sv-pnl{-webkit-mask-image:none;mask-image:none}
  .sh-l .mg-rail{flex-wrap:wrap;row-gap:6px}
  /* It fits the way your team already works: the two halves said the same
     thing twice and the rail was too small to read, so one flow on the dark
     ground: the ask, the four steps with their lines, the closing line */
  .fb{display:block;min-height:0}
  .fb-r{display:none}
  .fb-l{padding:30px 20px 34px}
  .fb-l h2{max-width:none}
  .fb-i span{display:block}
  .fb-i b{color:rgba(243,241,234,.78)}
  /* the logo strip runs as two lines, one each way */
  .cred .wrap>.credrow{display:none}
  .credrows{display:block}
  .credrows .credrow{display:block}
  .credrows .credrow+.credrow{margin-top:16px}
  .credrow-b .credtrack{animation-direction:reverse}
  /* How it works: the stage first, the six steps under it with their lines below */
  .hiw{display:flex;flex-direction:column;gap:14px}
  .hiw-r{order:1;width:100%}
  .hiw-l{order:2;border-top:0;width:100%}
  .hiw-i{padding:11px 0 12px}
  .hiw-i::before{top:auto;bottom:-1px}
}
/* a tapped card stays "hovered" on a touch screen until the next tap; only a
   finger on the card opens it */
@media(hover:none){
  .vcard:hover:not(.open) .vi-more,.vcard:focus-within:not(.open) .vi-more{max-height:0;opacity:0;margin-top:0}
  .vcard:hover:not(.open) .vi-art,.vcard:focus-within:not(.open) .vi-art{opacity:1}
  .vcard:hover:not(.open) .vi-ar,.vcard:focus-within:not(.open) .vi-ar{transform:none;color:var(--ink40)}
  .vcard:hover:not(.open)::after,.vcard:focus-within:not(.open)::after{background:none}
  /* the card is shorter on a phone, so the art gives way to the words while a finger is on it */
  .vcard.open .vi-art{opacity:0}
}

/* ---- phone only: the cost and speed comparison is spaced the way the
   homepage band spaces it, wherever it appears ---- */
@media(max-width:820px){
  .stpg{grid-template-columns:1fr;row-gap:clamp(36px,7vw,56px)}
  .stpg>.stp,.stpg>.stp+.stp{padding:0;border-right:0;border-top:0}
  .stpg .pn{align-items:baseline;gap:12px}
  .stpg .pn b{font-size:clamp(46px,5vw,72px)}
  .stpg .pn em{align-self:baseline;margin:0 0 0 -6px}
  .stpg .pn span{font-size:14.5px;line-height:1.35;max-width:22ch;flex:1 1 auto}
  .stpg .pviz{margin-top:clamp(26px,3vw,40px);min-height:0;align-items:flex-start}
  .stpg .tbar{gap:clamp(34px,4vw,54px)}
  .stpg .cbar{align-items:end;min-height:clamp(150px,15vw,190px)}
}
/* ---- phone only: the glass panels keep their tint but drop the blur. On a
   phone the ground behind them is a still wash, so the blur adds nothing,
   and a blurred panel is the one thing that has gone missing in Chrome. ---- */
@media(max-width:700px){
  .axp,.ax,.axs-back .ax,.stg-ask .axp,.stg-list,.mg-box,.sh-box{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---- the three tags on a use-case card read at phone size ---- */
@media(max-width:940px){
  .uc-chips{gap:7px}
  .uc-chips i{font-size:12px;padding:5px 9px}
}

/* working-size artifacts (x.py), 2026-09-23 */
@media(max-width:940px){
  .x-bl,.x-two,.x-rep,.x-code2{grid-template-columns:1fr}
  .x-week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-day{border-bottom:1px solid rgba(243,241,234,.09)}
  .x-dv{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .x-rept{grid-template-columns:1fr}
  .x-tm{grid-template-columns:34px minmax(0,1fr) auto;row-gap:6px}
  .x-tm q{grid-column:2 / -1}
  .x-tm code{display:none}
  .x-pr{grid-template-columns:20px minmax(0,1fr) auto}
  .x-prc,.x-prr{display:none}
  .hiw-stage:has(.x-fill){aspect-ratio:auto;min-height:520px}
}
@media(max-width:700px){
  .x-stage{padding:14px 12px 0}
  .x-stage:has(.x-dv){padding-bottom:14px}
  .x-body{padding:16px}
  .x-msg p{font-size:14px}
  .x-dv{grid-template-columns:1fr}
  .x-dvm{max-width:240px;margin:0 auto}
  .x-dvact .pv-btns{margin-left:0}
  .x-week{grid-template-columns:1fr}
  .x-c2 .x-row,.x-c3 .x-row,.x-c4 .x-row,.x-chg .x-c4 .x-row,.x-sv .x-row,.x-c5 .x-row{grid-template-columns:1fr;gap:3px}
  .x-hd{display:none}
  .x-row{font-size:14px}
  .x-lgh{display:none}
  .x-lg{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .x-lg em{grid-row:2}
  .x-lg b{grid-row:1 / 3;grid-column:2;align-self:center}
  .x-ag-h{display:none}
  .x-ag-r{grid-template-columns:18px minmax(0,1fr);row-gap:6px}
  .x-ag-r>span:not(:first-of-type){grid-column:2}
  .x-ag-act{flex-direction:column;align-items:flex-start}
  .x-ag-top{flex-direction:column;align-items:flex-start}
  .x-lib-h{display:none}
  .x-lib-r{grid-template-columns:1fr auto;row-gap:4px}
  .x-lib-r q{grid-column:1 / -1;font-size:15px}
  .x-lib-t{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .x-lib-t button{white-space:nowrap;flex:none}
  .x-sq{aspect-ratio:auto;min-height:0}
  .x-tk span{white-space:normal}
  .x-okb b{padding:11px 6px}
}
@media(max-width:700px){
  .x-sv .x-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .x-sv .x-row>span:nth-child(2),.x-sv .x-row>span:nth-child(3){display:none}
  .x-sv .x-row>span:nth-child(5){grid-column:1 / -1}
}
/* hyva: the trained-on stores scroll sideways on a phone */
@media(max-width:600px){
  .hyx .hy-feat{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-16px;margin-right:-16px;padding:0 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hyx .hy-feat::-webkit-scrollbar{display:none}
  .hyx .hy-feat figure{flex:0 0 80%;scroll-snap-align:start}
  .hyx .hy-feat figure:hover{transform:none}
}
@media(max-width:700px){
.cx-certs6{grid-template-columns:1fr 1fr!important}
.cx-certs6>div{min-width:0;min-height:110px;padding:16px 10px}
.cx-certs6 img,.cx-certs6 .w img,.cx-certs6 .w img[src*="cert-3"]{max-width:100%!important;width:auto!important;height:auto!important;max-height:44px}
.cx-certs6 img[src*="cert-"]{max-height:56px}
.cx-trust>*{min-width:0}
}
@media(max-width:560px){.sw-bg img,.sw-bg img[src*="cert-3"],.sw-bg img[src*="adobe"]{max-width:100%!important;width:auto!important;height:auto!important;max-height:52px!important}.sw-bg>div{min-width:0}}
/* security: access table fits a phone, no sideways scroll */
@media(max-width:700px){
.sx .sx-mxw{overflow:visible}
.sx .sx-mx{min-width:0;table-layout:fixed}
.sx .sx-mx th{font-size:9px;letter-spacing:.06em;padding:0 2px 12px}
.sx .sx-mx td{padding:14px 2px}
.sx .sx-mx td b{font-size:13px;line-height:1.25}
.sx .sx-mx td small{font-size:10.5px}
.sx-mx th:first-child,.sx-mx td:first-child{width:36%}
.sx-mx th{font-size:9px;letter-spacing:.06em;padding:0 2px 12px;line-height:1.3;white-space:normal;word-break:normal}
.sx-mx td{padding:14px 2px}
.sx-mx td:first-child{padding-left:6px;text-align:left}
.sx-mx td:first-child b{font-size:13px;line-height:1.25;display:block}
.sx-mx td:first-child small{font-size:10.5px;line-height:1.3}
.sx-mx i.sx-on{transform:scale(.85)}
}