/* Extends the original Lightfunnels site tokens; navbar and footer remain shared. */
html{scroll-behavior:smooth;scroll-padding-top:120px}.sc-site{padding-top:0}.sc-site button{font-family:inherit}.sc-site [hidden]{display:none!important}.sc-hero-inner{padding:126px var(--pad-x) 55px;text-align:center}.sc-breadcrumb{display:flex;justify-content:center;gap:14px;font-size:14px;color:var(--muted);margin-bottom:45px}.sc-breadcrumb a{color:var(--fg)}.sc-eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--accent-text);margin-bottom:21px}.sc-spark{font-size:23px;line-height:1}.sc-hero h1{font-size:clamp(40px,5.1vw,66px);letter-spacing:-.045em;line-height:1.05}.sc-intro{font-size:18px;line-height:1.65;margin:23px auto 27px;color:var(--muted)}.sc-hero-actions{display:flex;align-items:center;justify-content:center;gap:26px}.sc-hero-actions .btn{gap:22px}.sc-text-link{display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;color:inherit;font:inherit;font-size:14px;font-weight:600}.sc-text-link:hover{color:var(--accent-text)}.sc-clients{display:flex;justify-content:center;gap:20px;align-items:center;margin-top:35px;font-size:13px;color:var(--muted)}.sc-clients>span:not(:first-child){display:flex;gap:7px;align-items:center;color:var(--fg);font-weight:500}.sc-clients svg{width:17px;height:17px;fill:currentColor}.sc-clients>span:nth-child(2) svg{color:#c67b58}.sc-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:44px var(--pad-x) 27px}.sc-kicker{display:flex;gap:10px;font-size:12px;letter-spacing:.1em;font-weight:600;margin-bottom:15px;color:var(--muted)}.sc-kicker>span:first-child{color:var(--accent-text)}.sc-section-head h2{font-size:clamp(25px,2.7vw,34px);letter-spacing:-.035em;max-width:23ch}.sc-section-head>p{font-size:14px;line-height:1.6;max-width:31ch;flex-shrink:0}.sc-filter-bar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x) 24px;gap:15px}.sc-filters{display:flex;gap:6px;flex-wrap:wrap}.sc-filter{border:1px solid transparent;background:transparent;border-radius:7px;padding:9px 15px;font-size:14px;color:var(--muted);cursor:pointer}.sc-filter:hover{background:var(--card-tray);color:var(--fg)}.sc-filter[aria-pressed=true]{background:var(--card);border-color:var(--line-frame);color:var(--fg);box-shadow:0 2px 3px #00000005}.sc-count{font-size:12px;color:var(--muted);white-space:nowrap}.sc-gallery{display:grid;grid-template-columns:1fr 1fr;gap:30px 24px;padding:0 var(--pad-x)}.sc-example{min-width:0}.sc-example:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.45fr 1fr;border:1px solid var(--line-frame);border-radius:13px;overflow:hidden;background:var(--card)}.sc-preview{display:block;position:relative;background:var(--card-tray);padding:24px 24px 0;border:1px solid var(--line-frame);border-radius:12px;overflow:hidden;height:300px}.sc-example:first-child .sc-preview{border:0;border-radius:0;padding:32px 30px 0;height:382px;background:light-dark(#eae6dd,#2d2a25)}.sc-example:nth-child(2) .sc-preview{background:light-dark(#e5ebdf,#232b22)}.sc-example:nth-child(3) .sc-preview{background:light-dark(#e9e5ef,#28232e)}.sc-browser{height:100%;border:1px solid #00000012;border-radius:7px 7px 0 0;background:#fff;overflow:hidden;box-shadow:0 8px 30px #0000000f}.sc-browser-bar{height:25px;display:flex;align-items:center;gap:4px;padding:0 10px;background:#f8f8f8;border-bottom:1px solid #e8e8e8}.sc-browser-bar i{height:4px;width:4px;border-radius:50%;background:#ced0d1}.sc-browser-bar span{font-size:9px;color:#93999d;text-align:center;flex:1;letter-spacing:.025em;direction:ltr}.sc-preview img{width:100%;height:auto;display:block;transition:transform .55s ease;transform-origin:top}.sc-preview:hover img{transform:scale(1.025)}.sc-example-body{padding:22px 1px 0}.sc-example:first-child .sc-example-body{padding:39px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.sc-card-meta{display:flex;gap:7px;align-items:center;margin-bottom:11px;flex-wrap:wrap}.sc-tag{font-size:11px;letter-spacing:.055em;color:var(--muted);text-transform:uppercase;font-weight:500}.sc-tag+.sc-tag:before{content:'·';margin-inline-end:7px}.sc-featured-tag{color:var(--accent-text);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:7px}.sc-featured-tag:before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%}.sc-example h3{font-size:24px;letter-spacing:-.025em;margin-bottom:11px}.sc-example:first-child h3{font-size:31px}.sc-example p{font-size:15px;line-height:1.7}.sc-card-actions{display:flex;align-items:center;gap:18px;margin-top:22px}.sc-prompt-btn{padding:9px 12px;background:var(--card);border:1px solid var(--line-frame);border-radius:7px;color:var(--fg);font:600 13px var(--font);cursor:pointer;display:flex;gap:8px;align-items:center}.sc-prompt-btn:hover{border-color:var(--accent);color:var(--accent-text)}.sc-prompt-btn svg,.sc-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}.sc-gallery-note{font-size:12px;text-align:center;padding:32px var(--pad-x) 34px}.sc-prompt-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.sc-prompt-card{padding:28px 25px;display:flex;flex-direction:column;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);min-width:0}.sc-prompt-card:nth-child(3n){border-inline-end:0}.sc-prompt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sc-prompt-symbol{width:30px;height:30px;display:grid;place-items:center;background:var(--card-tray);border:1px solid var(--line-frame);border-radius:8px;font:20px var(--mono);color:var(--accent-text)}.sc-prompt-card h3{font-size:18px;margin-bottom:13px}.sc-prompt-card p{font-size:14px;line-height:1.7;flex:1}.sc-prompt-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:25px;gap:10px}.sc-prompt-bottom>span{font-size:11px;color:var(--muted)}.sc-copy{font:600 12px var(--font);display:flex;gap:6px;align-items:center;border:0;background:none;color:var(--fg);cursor:pointer;padding:6px 0}.sc-copy:hover{color:var(--accent-text)}.sc-connect-note{display:flex;align-items:center;gap:15px;padding:25px var(--pad-x)}.sc-connect-note p{font-size:14px;flex:1}.sc-note-icon{font:24px var(--mono);color:var(--accent-text)}.sc-connect-note a{white-space:nowrap}.sc-dialog::backdrop{background:#12182080;backdrop-filter:blur(5px)}.sc-toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);background:var(--fg);color:var(--surface);padding:12px 22px;font-size:14px;box-shadow:0 5px 25px #0002;border-radius:10px;z-index:10000;opacity:0;pointer-events:none;transition:.2s}.sc-toast.is-visible{opacity:1;transform:translate(-50%,0)}.sc-skip{position:fixed;top:-100px;left:20px;z-index:10001;background:var(--card);padding:12px 20px}.sc-skip:focus{top:12px}
@media(max-width:850px){.sc-section-head{align-items:flex-start}.sc-section-head>p{max-width:25ch}.sc-example:first-child{grid-template-columns:1.2fr 1fr}.sc-example:first-child .sc-preview{padding:20px 16px 0;height:330px}.sc-example:first-child .sc-example-body{padding:24px}.sc-example:first-child h3{font-size:27px}.sc-prompt-grid{grid-template-columns:repeat(2,1fr)}.sc-prompt-card:nth-child(3n){border-inline-end:1px solid var(--line)}.sc-prompt-card:nth-child(2n){border-inline-end:0}.sc-card-actions{gap:12px}.sc-preview{height:240px;padding:16px 16px 0}.sc-connect-note{flex-wrap:wrap}.sc-connect-note a{margin-inline-start:39px}}
@media(max-width:600px){.sc-hero-inner{padding-top:112px;padding-bottom:40px}.sc-breadcrumb{margin-bottom:34px}.sc-eyebrow{font-size:10px;letter-spacing:.08em}.sc-intro{font-size:16px}.sc-intro br{display:none}.sc-hero-actions{flex-direction:column;gap:18px}.sc-clients{gap:13px;font-size:12px;flex-wrap:wrap}.sc-section-head{flex-direction:column;padding-top:30px;gap:15px}.sc-section-head h2{max-width:none}.sc-section-head>p{max-width:none}.sc-section-head>p br{display:none}.sc-filter-bar{align-items:flex-start}.sc-filter{padding:8px 10px;font-size:12px}.sc-count{padding-top:9px}.sc-gallery{grid-template-columns:1fr;gap:30px}.sc-example:first-child{display:block}.sc-example:first-child .sc-preview{height:255px;padding:22px 20px 0}.sc-example:first-child .sc-example-body{padding:25px}.sc-featured-tag{margin-bottom:14px}.sc-preview{height:260px}.sc-example h3,.sc-example:first-child h3{font-size:25px}.sc-prompt-grid{grid-template-columns:1fr}.sc-prompt-card,.sc-prompt-card:nth-child(3n){border-inline-end:0}.sc-prompt-card{padding:25px var(--pad-x)}.sc-connect-note{gap:10px}.sc-connect-note p{min-width:180px}.sc-connect-note a{margin-inline-start:34px}.sc-gallery-note{text-align:start}.sc-toast{width:max-content;max-width:calc(100% - 30px);text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.sc-dialog [hidden]{display:none!important}
/* the page carries two .sheet layers; only the first should claim the viewport height */
.sc-foot{min-height:0}
/* Accessible image strip is also the WebGL-unavailable fallback. */
.sc-panorama{position:relative;isolation:isolate;overflow:clip;background:var(--surface);height:clamp(520px,62vw,940px);color:#fff}
.sc-panorama-track{display:flex;align-items:center;gap:18px;overflow-x:auto;height:100%;padding:40px 6vw;scroll-snap-type:x mandatory}
.sc-panorama-card{position:relative;flex:none;display:block;width:min(75vw,660px);aspect-ratio:1.6;overflow:hidden;border-radius:20px;scroll-snap-align:center}
.sc-panorama-card>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.sc-panorama-caption{position:absolute;inset:auto 0 0;padding:50px 22px 20px;background:linear-gradient(transparent,#000b);display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:22px}
.sc-panorama-arrow{border-radius:50%;display:grid;place-items:center;background:#000;width:34px;height:34px;flex-shrink:0}
.sc-ribbon-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline-offset:-4px}
.is-dragging .sc-ribbon-canvas{cursor:grabbing}
.has-webgl .sc-panorama-track{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.has-webgl .sc-panorama-track:focus-within{width:auto;height:auto;inset:auto 18px 58px;clip-path:none;background:#111;padding:12px;border-radius:10px;z-index:3;white-space:normal}
.has-webgl .sc-panorama-track:focus-within .sc-panorama-card{width:180px;font-size:14px}
.has-webgl .sc-panorama-track:focus-within .sc-panorama-caption{font-size:12px;padding:20px 8px 6px}
.sc-ribbon-controls{position:absolute;inset:auto 4vw 22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;direction:ltr}
.sc-ribbon-controls>span{font-size:10px;letter-spacing:.09em;color:#aaa}
.sc-ribbon-controls>div{display:flex;gap:8px;pointer-events:auto}
.sc-ribbon-controls button{background:#101010;color:#fff;width:32px;height:32px;border:1px solid #303030;border-radius:50%;font-size:17px;cursor:pointer}
.sc-ribbon-controls button:hover{background:#252525}
@media(max-width:600px){.sc-ribbon-controls{inset:auto 20px 20px}.sc-ribbon-controls>span{font-size:9px}}
.sc-panorama:not(.has-webgl) .sc-ribbon-controls{display:none}

/* ---- hero wall (hero-wall.js) ---------------------------------------------
   The canvas fills the section; the preview strip underneath is the fallback and
   the accessible copy, hidden from sight only once the wall is actually up. */
.sc-wall{text-align:center}
.sc-wall-head,.sc-wall-pill{position:absolute;z-index:2}
.sc-wall-head{left:0;right:0;bottom:calc(50% - var(--wall-top) / 2);margin-bottom:var(--waist);padding:0 var(--pad-x);display:grid;gap:14px;justify-items:center}
.sc-wall-pill{left:var(--pad-x);right:var(--pad-x);top:calc(50% + var(--wall-top) / 2);margin-top:var(--waist);margin-inline:auto;width:auto;max-width:620px}
/* --wall-top drops the whole stage — canvas and copy together — so the headline
   clears the floating navbar by more. Padding cannot do this: the copy is anchored
   to 50% of the PADDING box, which padding does not move. */
.sc-wall{--waist:clamp(98px,12.2vw,206px);--wall-top:clamp(102px,12.5vh,190px)}
.sc-wall .sc-breadcrumb{margin:0}
/* a canvas is a replaced element: insets alone leave it at its intrinsic 300x150,
   so the box has to be sized explicitly */
.sc-wall-canvas{position:absolute;top:var(--wall-top);left:0;z-index:1;display:block;width:100%;height:calc(100% - var(--wall-top))}
/* the strip is taken out of flow so it never disturbs the headline/pill layout */
.sc-panorama-track{position:absolute;inset:0;z-index:1}
.sc-wall-title{margin:0}
/* The cap is not there to wrap the brand — that is one word on a line of its own. The only thing
   it can break is the chip row, which must stay on ONE line or the headline becomes three. Arabic's
   "معرض الأعمال" plus the chip runs about 13px past 18ch, so the cap is 22ch: still a limit on a
   wide window, never tight enough to split the row. */
.sc-wall-title{font-size:clamp(26px,4.1vw,56px);letter-spacing:-.035em;line-height:1.1;color:var(--fg);text-wrap:balance;max-width:22ch}
.sc-wall-brand{display:block}
/* the second line is a row, not a run of text: the chip has to sit on the text's centre line and
   keep its own height whatever the font does */
.sc-wall-mark{display:flex;align-items:center;justify-content:center;gap:.26em;flex-wrap:wrap;margin-top:.3em}
.sc-wall-after{color:var(--fg)}
/* the chip is the prompt pill in miniature — same grey, same beam — and it is a link to the setup
   guide, so it carries the hover states of one */
.sc-wall-chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.14em;
  padding-block:.1em;padding-inline:.04em .46em;border-radius:999px;background:var(--pill-bg);
  color:#F2F4F6;text-decoration:none;
  /* the beam's corner, plus a comet scaled down to a chip — see the beam block in styles.css */
  --beam-r:999px;--beam-k:.42;--beam-soft:7px;--beam-strength:.85;--beam-play:paused}
.sc-wall-mcp{position:relative;z-index:1}
.sc-chip-icons{position:relative;z-index:1;display:flex;flex-shrink:0;align-items:center}
/* The supplied marks carry their own white disc, drop shadow and inner shadow, so the element is
   just the image. Two numbers come out of the artwork and the margins below depend on both: the
   disc is 0.70 of the file's width, and its centre sits at 0.43 of the height, not the middle —
   the extra room at the bottom is for the drop shadow, which is why the images are nudged down to
   put the DISCS on the text's centre line. */
.sc-chip-ico{display:block;width:1.18em;height:auto;flex:none;position:relative;top:.07em}
/* hovering fans the stack out; measured on the disc, not the file, so the overlap goes 30% -> 5% */
.sc-chip-ico+.sc-chip-ico{margin-inline-start:-.6em;transition:margin-inline-start .34s cubic-bezier(.2,.7,.2,1)}
.sc-wall-chip:hover .sc-chip-ico+.sc-chip-ico,.sc-wall-chip:focus-visible .sc-chip-ico+.sc-chip-ico{margin-inline-start:-.4em}
/* the chip's beam runs by itself, gated like the pill's on the section being live; hover only
   brightens it */
.sc-wall-chip.is-live{--beam-play:running}
.sc-wall-chip:hover,.sc-wall-chip:focus-visible{--beam-play:running;--beam-strength:1.15}
.sc-wall-pill{display:flex;align-items:center;gap:14px;padding-block:12px;padding-inline:16px 12px;border-radius:999px;text-align:start;
  background:var(--pill-bg);color:#F2F4F6;box-shadow:0 12px 40px #0000002e;overflow:hidden;
  text-decoration:none;transition:background .25s;
  --beam-r:999px;--beam-play:paused}
/* One variable for the grey, so the rings punched out of the avatars follow the hover with it.
   It lives at the root, NOT on .sc-wall: the modal has a standing copy of this pill, and scoped to
   the hero the variable resolved to nothing down there — the pill came out with no background. */
:root{--pill-bg:light-dark(#1F2327,#262B30)}
.sc-wall-pill:hover,.sc-wall-pill:focus-visible{--pill-bg:light-dark(#252A2F,#2E343A)}
.sc-wall-chip:hover,.sc-wall-chip:focus-visible{--pill-bg:light-dark(#252A2F,#2E343A)}
/* the beam's inner glow is a ::before at z-index 1, and a pseudo-element paints UNDER a real child
   at the same level only if the child is layered too — so the pill's own contents are lifted */
.sc-wall-avatars,.sc-wall-prompt,.sc-wall-send{position:relative;z-index:1}
.sc-wall-avatars{display:flex;flex-shrink:0}
.sc-wall-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#31373D;box-shadow:0 0 0 2px var(--pill-bg);opacity:.35;transition:opacity .3s}
.sc-wall-av+.sc-wall-av{margin-inline-start:-10px}
.sc-wall-av.is-on{opacity:1;z-index:1}
.sc-wall-av svg{width:18px;height:18px;fill:currentColor;color:#F2F4F6}
.sc-wall-av[data-client=claude] svg{color:#D97757}
/* The pill reserves as many lines as the narrowest prompt needs at that width, so a prompt that
   wraps cannot resize it in one step every few seconds: one line on desktop, where none of them
   wrap, two on a phone and three below 400px, where the column is down to about nineteen
   characters and the longest French prompt needs all three. The text lives in an inner block — the paragraph itself is the flex box that centres it, and a
   flex container would drop the spaces BETWEEN the word spans, since whitespace-only text is not
   a flex item. */
.sc-wall-prompt{flex:1;min-width:0;font-size:17px;font-weight:600;line-height:1.5;color:#C9D0D8;margin:0;min-height:26px;display:flex;align-items:center}
.sc-wall-line{display:block;flex:1;min-width:0}
/* The prompt arrives a word at a time out of a blur and leaves the same way, end first.
   showcase.js owns the schedule and writes each span's delay; these two durations are the
   IN and OUT constants there, so change them in pairs. */
.sc-wall-line span{display:inline-block;animation:sc-blur-in 620ms cubic-bezier(.22,.68,.16,1) both}
.sc-wall-prompt.is-out .sc-wall-line span{animation-name:sc-blur-out;animation-duration:460ms}
@keyframes sc-blur-in{from{opacity:0;filter:blur(9px);transform:translateY(.34em)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes sc-blur-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(9px);transform:translateY(-.24em)}}
.sc-wall-pill.is-live{--beam-play:running}
/* the beam itself lives in styles.css — the setup page draws one too and does not load this sheet */

.sc-wall-send{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#3A4148;font-size:15px}
html[dir=rtl] .sc-wall-send{transform:scaleX(-1)}
@media(max-width:600px){.sc-wall-pill{gap:10px;padding-block:10px;padding-inline:12px 10px}.sc-wall-prompt{font-size:13.5px;min-height:41px}.sc-wall-send{width:28px;height:28px}.sc-wall-av{width:28px;height:28px}.sc-wall-av svg{width:15px;height:15px}.sc-wall-av+.sc-wall-av{margin-inline-start:-9px}}
@media(max-width:400px){.sc-wall-prompt{min-height:61px}}
@media(prefers-reduced-motion:reduce){.sc-chip-ico+.sc-chip-ico{transition:none}}
/* The strip is the fallback and the accessible copy, so it starts HIDDEN and only the failure path
   reveals it. It used to be visible until hero-wall.js added `has-wall`, which meant every visitor
   saw a row of bare cards flash across the hero before the wall came up. */
.sc-panorama-track{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.no-wall .sc-panorama-track{position:absolute;inset:0;width:auto;height:auto;clip-path:none;white-space:normal}
.sc-panorama-track:focus-within{width:auto;height:auto;inset:auto 18px 22px;clip-path:none;background:var(--card);padding:12px;border-radius:10px;z-index:3;white-space:normal;box-shadow:0 10px 40px #0003}
.has-wall .sc-panorama-track:focus-within .sc-panorama-card{width:180px;font-size:14px}
.has-wall .sc-panorama-track:focus-within .sc-panorama-caption{font-size:12px;padding:20px 8px 6px}
/* the band has to hold the headline and the pill as well as the wall; at 300px the
   wall was squeezed into what was left over */
@media(max-width:600px){.sc-panorama{height:600px}.sc-wall{--waist:82px;--wall-top:70px}.sc-wall-title{font-size:25px}.sc-wall .sc-breadcrumb{font-size:12px}}

/* ---- preview modal ---------------------------------------------------------
   Reference: a1.gallery's website detail. Dark surface in both themes (via the
   footer's .is-dark tokens), the page capture scrollable on the left, and a stack
   of three cards on the right: title + actions, the prompt, then the meta rows.
   `[open]` on the grid display is load-bearing: an unconditional display:grid
   would override the UA's display:none and show a closed dialog. */
.sc-dialog{background:var(--surface);color:var(--fg);border:1px solid var(--line-frame);border-radius:24px;width:min(1560px,calc(100% - 24px));max-height:94dvh;padding:10px;box-shadow:0 30px 120px #0006;position:relative}
.sc-dialog::backdrop{background:#0b0d1080;backdrop-filter:blur(6px)}
/* A dialog[open] is position:absolute against the INITIAL containing block, so on a scrolled page
   it lays out at the top of the DOCUMENT and the browser scrolls up to it — which is the lurch this
   modal used to open with, made visible by scroll-behavior:smooth on <html>. Fixed anchors it to
   the viewport and nothing scrolls. */
.sc-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;
  position:fixed;inset:0;margin:auto;animation:sc-pop .26s cubic-bezier(.2,.8,.25,1) both}
.sc-dialog[open]::backdrop{animation:sc-fade .26s ease both}
@keyframes sc-pop{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}
@keyframes sc-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.sc-dialog[open],.sc-dialog[open]::backdrop{animation:none}}
.sc-modal-shot{border-radius:16px;overflow:auto;background:var(--card-tray);min-height:0;max-height:calc(92dvh - 28px);padding:22px 22px 0;scrollbar-width:thin}
.sc-modal-shot .sc-browser{height:auto;border-radius:10px 10px 0 0;box-shadow:0 20px 60px #0006}
.sc-modal-shot img{width:100%;height:auto;display:block}
.sc-modal-side{display:grid;gap:12px;align-content:start;overflow:auto;min-height:0;max-height:calc(92dvh - 28px);scrollbar-width:thin}
.sc-modal-card{background:var(--card);border-radius:16px;padding:26px;margin:0}
.sc-modal-card .sc-kicker{margin-bottom:12px;color:var(--accent-text)}
.sc-modal h2{font-size:28px;letter-spacing:-.03em;line-height:1.1}
.sc-modal-desc{font-size:14.5px;line-height:1.6;margin-top:12px}
.sc-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* the close button is absolute against the DIALOG and lands on this card's inline-end corner, so
   the head reserves room for it — English wrapped before reaching it by luck, Arabic's single long
   line ran straight underneath */
.sc-modal-card-head{display:grid;gap:4px;margin-bottom:12px;padding-inline-end:44px}
.sc-modal-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.sc-modal-label--muted{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:13px}
/* prompt: clamped to four lines with a fade, the reference's "Read more +" opens it */
/* the clamp carries the prompt's OWN type, because the fade below is sized in `em` and has to be
   exactly one line tall — on the card's 16px it ran 2.2em and cut a horizontal band through the
   middle of the third line, which is what read as corrupted text */
.sc-modal-clamp{position:relative;font-size:14.5px;line-height:1.65}
.sc-modal-prompt-text{font-size:1em;line-height:inherit;color:var(--fg);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sc-modal-clamp.is-open .sc-modal-prompt-text{display:block;-webkit-line-clamp:unset;overflow:visible}
/* The fade has to run toward the button, and the button sits at the line's END — so both flip with
   the writing direction. A gradient angle is physical (90deg is always left-to-right), which is why
   this needs a second rule rather than a logical keyword. */
.sc-modal-clamp:not(.is-open)::after{content:'';position:absolute;inset:auto 0 0 0;height:1.65em;background:linear-gradient(90deg,transparent 30%,var(--card) 62%);pointer-events:none}
html[dir=rtl] .sc-modal-clamp:not(.is-open)::after{background:linear-gradient(270deg,transparent 30%,var(--card) 62%)}
.sc-modal-more{position:absolute;inset-inline-end:0;bottom:0;background:var(--card);border:0;padding:0;padding-inline-start:14px;color:var(--fg);font:600 14.5px/1.65 var(--font);cursor:pointer;z-index:1}
.sc-modal-more b{font-weight:600;margin-inline-start:6px}
.sc-modal-clamp.is-open .sc-modal-more{position:static;display:block;margin-top:10px;padding:0}
.sc-modal-clamp.is-open::after{display:none}
.sc-modal-prompt .sc-modal-actions{margin-top:18px;align-items:center}
.m-btn--tight{min-height:2.65rem;padding:.5rem 1.15rem;gap:7px}
.m-btn--icon{min-height:2.65rem;width:2.65rem;padding:0;gap:0}
.m-btn--icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
#copy-dialog .sc-copy-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
#copy-dialog.is-done{background:#7189FF;background-image:linear-gradient(#ffffff40,#ffffff0a)}
#copy-dialog .sc-copy-mark{display:inline-flex;align-items:center}
#copy-dialog.is-done .sc-copy-mark svg:first-child{display:none}
#copy-dialog:not(.is-done) .sc-copy-mark svg+svg{display:none}
/* The hero's pill, standing still: same parts, every mark lit. It has to stay POSITIONED — the
   beam inside it is absolute, and against a static parent its containing block becomes the dialog,
   which is how the light ends up flying across the page pane. */
.sc-modal-cta{position:relative;inset:auto;max-width:none;margin:0;width:100%;border-radius:16px;
  box-shadow:0 6px 20px #00000038;
  /* a 16px corner, not the hero's capsule, and the comet pulled in to suit a 330px column */
  --beam-r:16px;--beam-k:.6;--beam-soft:14px;--beam-play:running}
.sc-modal-cta .sc-wall-av{opacity:1;width:28px;height:28px}
.sc-modal-cta .sc-wall-av svg{width:15px;height:15px}
.sc-modal-cta .sc-wall-av+.sc-wall-av{margin-inline-start:-9px}
.sc-modal-cta .sc-wall-send{width:28px;height:28px;font-size:14px}
/* the side column is 330px, so this line wraps where the hero's does not — tighten it so the two
   lines read as one message rather than as a paragraph */
.sc-modal-cta .sc-wall-prompt{min-height:0;font-size:15px;line-height:1.3}
/* the live page in a frame: the capture is the poster until the frame loads */
.sc-modal-shot{overflow:hidden;padding:22px 22px 0}
.sc-modal-shot .sc-browser{height:calc(92dvh - 28px - 22px);display:flex;flex-direction:column}
.sc-modal-frame{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
/* Both of these are pinned to the PHYSICAL left, not with `inset`. `inset:0` sets left AND right,
   which over-constrains a box 1440px wide — and an over-constrained absolute box drops whichever
   inset is on the start side, so under RTL the frame hung off the left edge and `transform-origin:
   top left` then scaled it about a corner that was no longer on screen. */
.sc-modal-frame img{position:absolute;top:0;left:0;right:auto;bottom:0;width:100%;height:auto;display:block}
/* the desktop view scales a full 1440px viewport down to fit, so the page inside lays out the way
   it does on a real desktop instead of reflowing into the pane's narrower width */
.sc-modal-frame iframe{position:absolute;top:0;left:0;right:auto;bottom:0;width:100%;height:100%;border:0;display:block;opacity:0;
  transition:opacity .35s;transform-origin:top left}
.sc-modal-frame.is-loaded iframe{opacity:1}
.sc-modal-loading{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#0F1214d9;color:#F2F4F6;font-size:12px;padding:7px 12px;border-radius:999px;pointer-events:none;transition:opacity .3s}
.sc-modal-frame.is-loaded .sc-modal-loading{opacity:0}
.sc-modal-meta{display:grid;gap:0}
.sc-modal-meta>div{display:grid;gap:5px;padding:14px 0;border-top:1px solid var(--line)}
.sc-modal-meta>div:first-child{border-top:0;padding-top:0}
.sc-modal-meta>div:last-child{padding-bottom:0}
.sc-modal-meta dt{font-size:12.5px;color:var(--muted)}
.sc-modal-meta dd{margin:0;font-size:15px;font-weight:500}
.sc-modal-meta dd a{color:var(--fg)}
.sc-modal-close{position:absolute;top:22px;inset-inline-end:22px;z-index:2}
.sc-modal-shot:empty{display:none}
.sc-dialog[open].is-textonly{grid-template-columns:1fr;width:min(620px,calc(100% - 32px))}
.is-textonly .sc-modal-shot,.is-textonly .sc-modal-meta,.is-textonly #dialog-live{display:none}
/* the buttons: pill, semibold, an emboss on the label, a top-lit sheen, and a
   layered shadow with a light inner ring — the a1.gallery recipe in our tokens */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:3.25rem;padding:.75rem 1.6rem;border:0;border-radius:100rem;font:600 14px var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;text-shadow:0 1px .5px #0000004d;transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .35s cubic-bezier(.16,1,.3,1)}
.m-btn:hover{transform:translateY(-1px)}.m-btn:active{transform:translateY(0) scale(.985)}
.m-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.m-btn--primary{background:var(--accent);color:#fff;background-image:linear-gradient(#ffffff40,#ffffff0a);box-shadow:0 8px 8px #0000001a,inset 0 0 0 1.5px #ffffff59,0 0 1px #0000001a,0 2px 2px #0000001a,0 4px 4px #0000001a}
.m-btn--secondary{background:var(--card-tray);color:var(--fg);background-image:linear-gradient(315deg,transparent,#ffffff0a);box-shadow:inset 0 1px #ffffff08,inset 0 0 0 1px #ffffff08,0 0 0 1px #0000001a,0 2px 2px #0000001a,0 4px 4px #0000001a,0 8px 8px #0000001a}
.m-btn--icon{width:3rem;height:3rem;min-height:0;padding:0;background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px #ffffff12,0 2px 2px #0000001a,0 4px 4px #0000001a}
.m-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent)}
html[lang=ar] .m-arrow{display:inline-block;transform:scaleX(-1)}
.sc-modal-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(max-width:850px){.sc-dialog[open]{grid-template-columns:1fr;padding:10px;gap:10px;max-height:94dvh;overflow:auto}.sc-modal-shot{padding:14px 14px 0;flex-shrink:0}.sc-modal-shot .sc-browser{height:300px}.sc-modal-side{max-height:none;overflow:visible}.sc-modal-card{padding:20px}.sc-modal h2{font-size:23px}.sc-modal-close{top:18px;inset-inline-end:18px}}


/* ---- preview modal, second pass ----------------------------------------
   The right column scrolls only when its own content is taller than the frame, and it is the ONLY
   thing that scrolls: the shot pane is a fixed-height browser frame, so a permanent track next to it
   was scrolling nothing. Expanding the prompt used to add a second track on top of that. */
.sc-modal-side{overflow-y:auto;overscroll-behavior:contain}
.sc-modal-side::-webkit-scrollbar{width:8px}
.sc-modal-side::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:99px}
.sc-modal-side::-webkit-scrollbar-thumb:hover{background:#ffffff3d}
.sc-modal-side::-webkit-scrollbar-track{background:transparent}
.sc-modal-shot{overflow:hidden}

/* title and description live on for screen readers only — the dialog is named by the title */
.sc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* device switcher, centred above the frame */
.sc-device{display:flex;gap:2px;justify-self:center;margin:0 auto 14px;padding:4px;border-radius:999px;background:#ffffff0f;border:1px solid #ffffff14;width:max-content}
.sc-device-btn{display:grid;place-items:center;width:46px;height:36px;border:0;border-radius:999px;background:transparent;color:#ffffff8c;cursor:pointer;transition:background .18s,color .18s}
.sc-device-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sc-device-btn:hover{color:#fff}
.sc-device-btn.is-on{background:#ffffff1f;color:#fff}
.sc-device-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-modal-shot{display:grid;grid-template-rows:auto minmax(0,1fr);padding-top:18px}
.sc-modal-shot .sc-browser{height:auto;min-height:0}

/* phone: the iframe narrows and centres, the page inside reflows on its own.
   Narrow the IFRAME, not its container — an auto inline margin on a column flex item turns off
   its cross-axis stretch, and since every child here is absolutely positioned the container
   would collapse to zero width. */
.sc-modal-shot.is-mobile .sc-modal-frame{background:#0b0d0f}
.sc-modal-shot.is-mobile .sc-modal-frame iframe{width:392px;left:50%;right:auto;transform:translateX(-50%);border-radius:0 0 12px 12px}

/* loading state: the mark scattered onto a sphere and reassembled, in the middle of the frame */
.sc-modal-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  transform:none;background:var(--surface);color:var(--muted);font-size:13px;padding:0;border-radius:12px;pointer-events:none;transition:opacity .3s}
.sc-orb{display:block}
.sc-modal-frame.is-loaded .sc-modal-loading{opacity:0}

/* ---- the preview fills the dialog, and the dialog fills the screen ----
   No browser chrome around the page: the mock bar was a picture of a browser inside a browser. */
.sc-dialog[open]:not(.is-textonly){height:94dvh}
/* the page pane is one of the modal's cards, not a hole in it */
.sc-modal-shot{height:100%;max-height:none;padding:10px;background:var(--card);border-radius:16px}
.sc-modal-shot .sc-browser{height:100%;min-height:0;border:0;border-radius:12px;background:transparent;box-shadow:none;overflow:hidden}
.sc-modal-shot .sc-browser-bar{display:none}
.sc-modal-side{max-height:none;height:100%}
.sc-modal-frame{border-radius:12px;background:var(--surface)}
/* phone: only the iframe narrows; what shows either side is the dialog's own surface, not a black slab */
.sc-modal-shot.is-mobile .sc-modal-frame{background:transparent}
.sc-modal-shot.is-mobile .sc-modal-frame iframe{border-radius:12px}


/* the dot field was removed from this hero; the rule that pinned it under the wall went with it */

/* ---- the throat: orb + corridor (hero-orb.js, hero-corridor.js) -------------
   Both hero renderers mask a disc out of the middle of the band; the orb sits in it.
   It is centred on the BAND, which --wall-top has pushed down, not on the section —
   the same anchor line the headline and the pill are measured from. */
.sc-wall-orb{position:absolute;left:50%;top:calc(50% + var(--wall-top) / 2);transform:translate(-50%,-50%);
  z-index:1;display:block;pointer-events:none}
/* ?hero=corridor — the CSS-3D alternative to the wall, in the same box as its canvas.
   container-type is what makes cqw mean "percent of the band's width", which is how the
   whole corridor keeps its proportions at any size. */
.sc-corridor{position:absolute;top:var(--wall-top);left:0;width:100%;height:calc(100% - var(--wall-top));
  z-index:1;container-type:inline-size;overflow:clip}
.sc-corridor-stage{position:absolute;inset:0}
/* The throat is PAINTED here, not masked out. A mask-image over a preserve-3d subtree is applied
   per composited layer in Chrome rather than once in screen space, so the cards nearest the camera
   — the ones with their own layer — vanish wholesale while the small ones stay: a transparent
   circle 85px wide deletes a 650px card at the frame edge. Nothing in the computed styles hints at
   it. An opaque mask renders everything, which is how you can tell it is the geometry and not the
   masking. So the gap is a disc of the section's own background laid over the corridor, feathered
   on the same two radii the wall's shader fades between. */
.sc-corridor-plug{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
  width:calc(var(--hole-out,0px) * 2);height:calc(var(--hole-out,0px) * 2);transform:translate(-50%,-50%);
  background:radial-gradient(circle closest-side,var(--surface) 0 var(--hole,0px),transparent var(--hole-out,0px))}
.sc-corridor-space{position:absolute;inset:0;transform-style:preserve-3d}
.sc-corridor-card{position:absolute;overflow:hidden;backface-visibility:hidden}
.sc-corridor-card img{width:100%;height:100%;object-fit:cover;display:block}
/* Pausing rather than disabling keeps the corridor whole: every card is already dropped
   mid-flight by its negative delay, so it freezes as a finished still instead of collapsing
   onto the axis. */
@media(prefers-reduced-motion:reduce){.sc-corridor-card{animation-play-state:paused}}


/* ---- browse: two tabs, then the category pills ------------------------------
   The pills copy the reference exactly: a dark capsule with a 1px highlight along its
   top edge and a soft shadow under it, and the selected one inverted to the surface's
   opposite. The highlight is an INSET shadow rather than a border, so it does not add
   a pixel to the pill's height and does not show on the bottom edge. */
/* The browse band is drawn with the site's own line system: the section's border above it, a rule
   below it, one vertical divider between the two groups, and a node at every intersection — the
   same 6px dot the rails use, from the same three tokens. The divider is a COLUMN border, not an
   element inside the padding, so it runs the whole height of the band and meets both lines. */
.sc-browse{display:grid;grid-template-columns:minmax(190px,32%) 1fr;position:relative;max-width:100%;
  border-bottom:1px solid var(--line)}
.sc-browse__tabs,.sc-browse__cats{display:flex;align-items:center;min-width:0;padding-block:34px}
.sc-browse__tabs{padding-inline:var(--pad-x) 22px}
.sc-browse__cats{position:relative;justify-content:flex-end;padding-inline:22px var(--pad-x);
  border-inline-start:1px solid var(--line)}
.sc-browse::before,.sc-browse::after,.sc-browse__cats::before,.sc-browse__cats::after{
  content:"";position:absolute;width:var(--dot-size);height:var(--dot-size);border-radius:50%;
  background:var(--dot);box-shadow:0 0 0 1px var(--dot-ring);z-index:3;pointer-events:none}
.sc-browse::before{left:-.5px;bottom:-.5px;translate:-50% 50%}
.sc-browse::after{right:-.5px;bottom:-.5px;translate:50% 50%}
.sc-browse__cats::before{left:-.5px;top:-.5px;translate:-50% -50%}
.sc-browse__cats::after{left:-.5px;bottom:-.5px;translate:-50% 50%}
/* each group scrolls sideways on its own when it runs out of room; the padding is what stops that
   overflow clipping the selected pill's shadow */
.sc-seg,.sc-pills{display:flex;align-items:center;gap:8px;flex:none;max-width:100%;
  padding:8px 2px;margin:-8px -2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.sc-seg::-webkit-scrollbar,.sc-pills::-webkit-scrollbar{display:none}
/* the track: the two tabs read as one switch, the way a period toggle does */
.sc-seg{gap:2px;padding:3px;margin:0;border-radius:999px;background:light-dark(#EEF0F2,#16191C);
  box-shadow:inset 0 1px 2px light-dark(#00000012,#00000047);overflow:visible}
.sc-seg .sc-pill{background:none;box-shadow:none;color:light-dark(#5C646C,#8D959D)}
.sc-seg .sc-pill:hover{background:light-dark(#00000008,#ffffff0f);color:var(--fg)}
.sc-seg .sc-pill[aria-selected=true]{background:light-dark(#E1E5E9,#2B3037);color:var(--fg);
  box-shadow:inset 0 1px 0 light-dark(#ffffffcc,#ffffff1f),0 1px 2px light-dark(#0000000f,#0000003d)}
@media(max-width:760px){
  .sc-browse{grid-template-columns:1fr}
  .sc-browse__tabs{padding-inline:var(--pad-x);padding-bottom:20px}
  .sc-browse__cats{border-inline-start:0;border-top:1px solid var(--line);padding-inline:var(--pad-x);
    justify-content:flex-start}
  .sc-browse__cats::after{left:auto;right:-.5px;top:-.5px;bottom:auto;translate:50% -50%}
}
.sc-pill{display:inline-flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 13px;border:0;cursor:pointer;
  border-radius:999px;font:500 14px/1 var(--font);white-space:nowrap;
  color:light-dark(#4B525A,#AEB7C0);background:light-dark(#EFF1F3,#1B1E22);
  box-shadow:inset 0 1px 0 light-dark(#ffffffcc,#ffffff12),0 1px 2px light-dark(#0000000d,#0000003d);
  transition:background .18s,color .18s}
.sc-pill:hover{background:light-dark(#E6E9EC,#23272C);color:var(--fg)}
/* a category is a narrowing, not a switch: it only steps a shade lighter than its resting self */
.sc-pill[aria-pressed=true]{
  background:light-dark(#E1E5E9,#2B3037);color:var(--fg);
  box-shadow:inset 0 1px 0 light-dark(#ffffffcc,#ffffff1f),0 1px 2px light-dark(#0000000f,#0000003d)}
.sc-pill svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- the cards --------------------------------------------------------------
   One button stretched over the whole card does the opening, so the thumbnail, the
   title and the icon are all one target and there is one tab stop. The copy pill sits
   ABOVE it and is a button of its own; on the prompt cards it is decorative and lets
   clicks fall through, because there the card and the pill would do the same thing. */
.sc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px;padding:44px var(--pad-x) 64px}
.sc-card{position:relative;min-width:0}
.sc-card-open{position:absolute;inset:0;z-index:1;padding:0;border:0;background:none;cursor:pointer;border-radius:18px}
.sc-card-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the tray is one step off the page in whichever direction the page goes: a slight grey, not a
   light panel sitting on a dark page */
/* The captures are 1440x1050 and the tray's content box is squarer than that, so `cover` pays for
   every extra pixel of height by cropping the sides. 1.22 is as tall as it goes before the page
   inside starts losing its edges. */
.sc-card-media{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1.22;padding:20px 20px 0;
  background:light-dark(#F1F2F4,#1B1E22);box-shadow:0 1px 2px light-dark(#0000001a,#0000)}
.sc-card-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;
  border-radius:9px 9px 0 0;box-shadow:0 10px 30px #00000026;transition:transform .5s ease;transform-origin:top}
.sc-card:hover .sc-card-media img{transform:scale(1.02)}
.sc-card-copy{position:absolute;top:12px;inset-inline-end:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 13px/1 var(--font);
  /* glass: the tray shows through it, which is why the fill is translucent and the seam is white */
  background:#14171Acc;-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  color:#F2F4F6;box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 1px 0 #ffffff3d,0 4px 14px #00000047;
  opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .2s,background .2s;
  /* invisible has to mean untouchable: left hit-testable it is the top target over the card's own
     button, so on a touch screen the first tap on that corner copies instead of opening. Keyboard
     focus is unaffected — pointer-events only governs POINTER hit-testing. */
  pointer-events:none}
.sc-card-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
.sc-card:hover .sc-card-copy,.sc-card-copy:focus-visible{opacity:1;transform:none}
.sc-card:hover button.sc-card-copy,button.sc-card-copy:focus-visible{pointer-events:auto}
.sc-card-copy:hover{background:#1D2126d9}
/* the copied state: the tick swaps in and the glass lifts a shade — the same pill, acknowledged */
.sc-card-copy.is-done{background:#3A414Ad9;box-shadow:inset 0 0 0 1px #ffffff47,inset 0 1px 0 #ffffff52,0 4px 14px #00000047}
.sc-card-copy .sc-copy-mark{display:inline-flex;align-items:center}
.sc-card-copy .sc-copy-mark svg{transition:transform .22s cubic-bezier(.2,.8,.3,1.4),opacity .18s}
.sc-card-copy.is-done .sc-copy-mark svg:first-child{display:none}
.sc-card-copy:not(.is-done) .sc-copy-mark svg+svg{display:none}
.sc-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 3px 0}
.sc-card-foot h3{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--fg);min-width:0}
.sc-card-view{flex:none;color:var(--muted);display:grid;place-items:center;transition:color .2s}
.sc-card-view svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
.sc-card:hover .sc-card-view{color:var(--fg)}
/* the prompt cards are the same card with the text where the screenshot goes */
.sc-prompt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px;padding:44px var(--pad-x) 64px;border:0}
/* the prompt tray has no picture to set its height, so it takes the row's: the card is a column
   and the tray is the part that flexes, which keeps every tray in a row the same height */
.sc-card--prompt{display:flex;flex-direction:column}
.sc-card--prompt .sc-card-media{display:block;flex:1;aspect-ratio:auto;min-height:186px;
  padding:22px 24px 64px;background:light-dark(#F1F2F4,#1B1E22)}
.sc-card-badge{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;margin-bottom:16px;
  background:light-dark(#fff,#23272C);color:light-dark(#4A515A,#C3CAD2);
  box-shadow:inset 0 0 0 1px light-dark(#00000012,#ffffff14),0 1px 2px #0000000f}
.sc-card-badge svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* on a prompt card the pill would land on the first line of the prompt, so it sits at the foot */
.sc-card--prompt .sc-card-copy{top:auto;bottom:14px}
.sc-card-text{font-size:14.5px;line-height:1.62;color:light-dark(#4A4E55,#AEB6BF);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:980px){.sc-gallery,.sc-prompt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sc-gallery,.sc-prompt-grid{grid-template-columns:1fr;gap:28px}
  .sc-browse{padding-top:32px}.sc-card-copy{opacity:1;transform:none}button.sc-card-copy{pointer-events:auto}}

/* ---- the modal on a phone ---------------------------------------------------
   One column, read in the order a phone wants it: the prompt first, then the page, then the meta,
   then the CTA. That reordering is what `display:contents` on the side column is for — it drops the
   column's own box so its three cards become rows of the DIALOG's grid and `order` can interleave
   them with the page pane. It also fixes the CTA, which as a grid item inside a column that was
   itself height-constrained came out 20px tall with its text clipped away.
   The pane's height is its own problem: the rules above give it `height:100%`, written for the
   two-column dialog, and here the dialog scrolls, so the percentage had nothing to resolve against
   and the pane collapsed to a sliver — with a 1440px page scaled into it, that is what read as a
   corrupted preview. It gets a tall real height instead, and the page lays out at the pane's own
   width rather than narrowed to 392px and centred: the pane IS a phone width. */
@media(max-width:850px){
  /* Flex, not grid. A grid container with a definite max-height hands its rows a share of that
     height, and the page pane — whose own tracks floor at 0 — was the one that gave way, coming
     back 179px tall with a 1218px frame inside it. A flex column with nothing allowed to shrink
     lets the dialog overflow and scroll, which is what it should do. `order` works the same here.
     `.sc-dialog[open]` above already sets display, padding and gap, and beats a bare `.sc-dialog`. */
  .sc-dialog[open]{display:flex;flex-direction:column;width:calc(100% - 12px);border-radius:18px;padding:8px;gap:8px}
  /* the side column is `display:contents`, so its cards are flex items of the DIALOG but not its
     DOM children — they need the no-shrink rule spelled out or the CTA, whose min-content height is
     near zero behind its own `overflow:hidden`, is the one that gives way and clips its text */
  .sc-dialog[open] > *, .sc-dialog[open] .sc-modal-side > *{flex:0 0 auto}
  .sc-dialog[open]:not(.is-textonly){height:auto;max-height:96dvh}
  .sc-modal-side{display:contents}
  .sc-modal-prompt{order:1}
  .sc-modal-shot{order:2}
  .sc-modal-meta{order:3}
  .sc-modal-cta{order:4}
  .sc-modal-card{padding:16px}
  .sc-modal-close{top:14px;inset-inline-end:14px}
  .sc-device{display:none}
  /* tall on purpose: a short window turns a real page into a peephole. The dialog scrolls past it */
  .sc-modal-shot{height:auto;padding:8px}
  .sc-modal-shot .sc-browser{height:150dvh}
  .sc-modal-shot.is-mobile .sc-modal-frame iframe{width:100%;left:0;transform:none;border-radius:10px}
}

/* `.m-btn`'s own min-height sits LATER in this file than the `--tight` and `--icon` modifiers, so
   it quietly won back both of them and every button in the modal came out at 3.25rem. */
.m-btn--tight{min-height:2.5rem;padding:.4rem 1.05rem}
.m-btn--icon{width:2.5rem;height:2.5rem;min-height:0;padding:0}