/* Plate Studio in the new landing's theme (2026-09-27): the Studio layer, loaded after
   plate-theme.css on studio.html only. Tokens, type, pills, header and footer live there. */

/* ------------------------------------------------------------------ loading */
.plate-sub .state-loading { padding-top: clamp(24px, 6vh, 72px); }
.plate-sub .skeleton { border-radius: 12px; background: linear-gradient(100deg, #121214 30%, #1A1A1D 50%, #121214 70%); background-size: 220% 100%; animation: theme-sheen 1.8s var(--ease) infinite; }
.plate-sub .skeleton-title { height: 56px; width: min(460px, 76%); border-radius: 10px; }
.plate-sub .skeleton-block { height: min(46vh, 380px); border-radius: 16px; }
@keyframes theme-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ------------------------------------------------------------------ views arrive */
.plate-sub [data-view]:not([hidden]) { animation: theme-arrive .6s var(--ease-out) both; }
.plate-sub [data-view="loading"]:not([hidden]) { animation-duration: .3s; }
@keyframes theme-arrive { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------------ signed out: the entry */
.plate-sub .entry { gap: clamp(36px, 5vw, 88px); align-items: center; min-height: calc(100svh - 190px); }
.plate-sub .entry h1 { font-size: clamp(46px, 5vw, 78px); line-height: .95; letter-spacing: -.018em; }
html[lang="he"] .plate-sub .entry h1 { font-size: clamp(42px, 4.4vw, 66px); line-height: 1.05; }
.plate-sub .entry .lead { margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--ink-l2); max-width: 40ch; }
.plate-sub .login { margin-top: 32px; padding: 20px; border-radius: 16px; }
.plate-sub .login .help { font-size: 13px; line-height: 1.55; }
.plate-sub .entry-upgrade { color: var(--ink-l2); }
.plate-sub .entry-upgrade strong { color: var(--ink-l); font-weight: 600; }
.plate-sub .advanced { border-top-color: var(--hair); }
.plate-sub .advanced > summary { color: var(--ink-l2); font-size: 13px; }
.plate-sub .advanced > summary:hover { color: var(--ink-l); }
.plate-sub .advanced summary::before { border-color: var(--hair-2); border-radius: 50%; color: var(--ink-l); }
.plate-sub .advanced .login-actions { margin-top: 16px; }
.plate-sub .reveal { font-family: var(--t-text); border-radius: 999px; color: var(--ink-l); background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); border: 0; padding: 0 14px; }
.plate-sub .entry-perks { gap: 10px 22px; margin-top: 22px; }
.plate-sub .entry-perks li { font-size: 13.5px; color: var(--ink-l2); }
.plate-sub .sell-check { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-3); }
.plate-sub .sell-check::after { border-color: var(--ink-l); }

/* the wall: the collection's own work, held still inside one of K's glass tiles. The tile's
   thick rim carries the mark (white | stripe | black) round its edge; it is drawn as the wall's
   own border so the corners stay round and the caption below stays outside the tile. */
.plate-sub .entry-wall { position: relative; overflow: visible; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.plate-sub .entry-wall .sell-wall { --h: clamp(92px, 11.2vh, 132px); position: relative; margin: 0; padding: 12px 0; gap: 12px; overflow: hidden;
  border: 9px solid transparent; border-radius: 21px;
  background:
    linear-gradient(#050506, #050506) padding-box,
    linear-gradient(205deg, rgba(255,255,255,.55), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.18)) border-box,
    linear-gradient(90deg, rgba(236,236,232,.78) 0 50%, var(--stripe) 50% 56.25%, rgba(16,16,20,.94) 56.25% 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), -34px 46px 110px rgba(0,0,0,.6), -8px 12px 26px rgba(0,0,0,.34); }
.plate-sub .entry-wall-cap { padding: 24px 2px 0; font: 500 13.5px/1.3 var(--t-text); color: var(--ink-l2); }
.plate-sub .entry-wall-cap b { color: var(--ink-l); font-weight: 600; }
/* held still: no marquee, no drift; row two sits half a tile over, like a laid wall */
.plate-sub .entry-wall .sell-track { animation: none; }
.plate-sub .entry-wall .sell-row { translate: none; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out); }
.plate-sub .entry-wall .sell-row-2 .sell-track { transform: translateX(calc(var(--h) * -.89)); }
html[dir="rtl"] .plate-sub .entry-wall .sell-row-2 .sell-track { transform: translateX(calc(var(--h) * .89)); }
.plate-sub .entry-wall .sell-set { gap: 12px; padding-inline-end: 12px; }
.plate-sub .entry-wall .sell-card { border-radius: 6px; background: #050506; }
.plate-sub .entry-wall .sell-card::after { background: none; box-shadow: inset 0 0 0 1px rgba(236,240,242,.3); border-radius: inherit; }
.plate-sub .entry-wall .sell-set:hover .sell-card:not(:hover) { filter: brightness(.62); }
.plate-sub .entry-wall .sell-card:hover { transform: scale(1.035); box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.35); }
.plate-sub .entry-wall .sell-card[data-kind="motion"]:hover { box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.35); }
/* at rest a tile shows only the work; its label arrives on hover, as on the landing's wall */
.plate-sub .entry-wall :is(.sell-chip, .sell-tier-pro, .sell-card-title) { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.plate-sub .entry-wall .sell-card:is(:hover, :focus-visible) :is(.sell-chip, .sell-card-title) { opacity: 1; transform: none; }
.plate-sub .entry-wall .sell-chip, .plate-sub .entry-wall .sell-chip-motion { background: rgba(11,11,12,.78); color: var(--ink-l2); box-shadow: none; border-radius: 6px; font-family: var(--t-text); font-stretch: 125%; letter-spacing: .1em; }
.plate-sub .entry-wall .sell-card-title { font: 600 14px/1.1 var(--t-text); }
.plate-sub .entry-wall .sell-tier-free { background: var(--pill-white); color: #0C0C0E; border-radius: 6px; font-family: var(--t-text); font-stretch: 125%; font-weight: 750; letter-spacing: .12em;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.25); }
.plate-sub .entry-wall .sell-card:focus-visible { outline: 2px solid var(--ink-l); outline-offset: 2px; }
@media (max-width: 1000px) {
  .plate-sub .entry-wall { margin-top: 8px; }
}
@media (max-width: 700px) {
  .plate-sub .entry h1 { font-size: 40px; }
  html[lang="he"] .plate-sub .entry h1 { font-size: 36px; }
  .plate-sub .entry .lead { font-size: 15.5px; margin-top: 14px; }
  .plate-sub .entry-wall .sell-wall { --h: 84px; }
  .plate-sub .login { padding: 14px; }
}

/* ------------------------------------------------------------------ unavailable */
.plate-sub .notice-view { padding: clamp(24px, 6vh, 72px) 0 0; }
.plate-sub .notice-view h1 { font-size: clamp(38px, 3.8vw, 58px); max-width: 16ch; }
.plate-sub .notice-view .lead { color: var(--ink-l2); font-size: 17px; }

/* ------------------------------------------------------------------ signed in */
.plate-sub .purchase-notice { padding: 14px 18px; border-radius: 14px; color: var(--ink-l); }
.plate-sub .purchase-notice.is-good { background: #141B14; box-shadow: inset 0 0 0 1px rgba(137,214,146,.34); color: var(--ink-l); }
.plate-sub .purchase-notice.is-bad { background: #1B1213; box-shadow: inset 0 0 0 1px rgba(229,72,77,.45); color: #FF9EA0; }
.plate-sub .notice-close { border-radius: 50%; color: var(--ink-l2); }
.plate-sub .notice-close:hover { background: rgba(238,237,232,.08); color: var(--ink-l); }
.plate-sub .use-notice { color: var(--ink-l); }
.plate-sub .purchase-support-hint { color: var(--ink-l2); }

/* the Pro header */
body[data-plan="pro"].plate-sub .ws-hero { padding: clamp(18px, 3.4vw, 48px) 0 clamp(34px, 4.4vw, 60px); margin-bottom: clamp(24px, 3vw, 40px); }
body[data-plan="pro"].plate-sub .ws-hero::after { display: none; }
.plate-sub .ws-eyebrow { gap: 12px; margin-bottom: 22px; }
/* the eyebrow's dot is the mark: white | stripe | black */
.plate-sub .ws-dot { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  background: linear-gradient(90deg, #F2F2F0 0 50%, var(--stripe) 50% 56.25%, #0B0B0B 56.25% 100%); }
.plate-sub .ws-title { font-size: clamp(50px, 5.8vw, 92px); line-height: .94; letter-spacing: -.02em; }
html[lang="he"] .plate-sub .ws-title { font-size: clamp(44px, 5vw, 76px); line-height: 1.04; letter-spacing: -.01em; }
.plate-sub .ws-lead { font: 400 17px/1.55 var(--t-text); color: var(--ink-l2); max-width: 44ch; margin-top: 22px; }
.plate-sub .ws-cta, .plate-sub .ws-ghost { min-height: 54px; font-size: 15.5px; font-weight: 600; }
.plate-sub .ws-cta { background: var(--pill-white); color: #0C0C0E; box-shadow: none; }
.plate-sub .ws-cta:hover { background: #FFFFFF; transform: none; }
.plate-sub .ws-cta-plus { width: 34px; height: 34px; background: #0C0C0E; }
.plate-sub .ws-cta-plus::before, .plate-sub .ws-cta-plus::after { background: var(--pill-white); }

/* the Starter panel */
body[data-plan="starter"].plate-sub .work-grid { margin-bottom: clamp(44px, 5vw, 76px); }
.plate-sub .own-idea { border: 0; border-radius: 0; background: none; box-shadow: none; }
.plate-sub .own-idea > summary { font: 600 15px/1.3 var(--t-text); color: var(--ink-l); border: 0; border-radius: 14px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .2s var(--ease); }
.plate-sub .own-idea > summary:hover { box-shadow: inset 0 0 0 1px var(--hair-2); }
.plate-sub .own-idea[open] > summary { border-color: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); margin-bottom: 28px; }
.plate-sub .starter-heading > p:not(.setup-eyebrow) { margin-top: 16px; }
.plate-sub .starter-walkthrough, .plate-sub .composer-walkthrough { color: var(--ink-l); }
html[dir="rtl"] .plate-sub .starter-walkthrough { right: auto; left: 0; }
.plate-sub .own-idea > summary .sub-note, .plate-sub .sub-note { font-family: var(--t-text); color: var(--ink-l2); font-weight: 400; }
.plate-sub .starter-heading h1, .plate-sub .composer-head h1 { font-size: clamp(38px, 3.6vw, 56px); letter-spacing: -.015em; line-height: .98; }
html[lang="he"] .plate-sub :is(.starter-heading h1, .composer-head h1) { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.08; }
.plate-sub .starter-heading p { color: var(--ink-l2); }
.plate-sub .starter-setup h2, .plate-sub .starter-upgrade h2, .plate-sub .starter-labs h2 { font-size: 28px; line-height: 1.02; }
.plate-sub .first-task h3 { font: 600 16px/1.3 var(--t-text); }
.plate-sub .first-task h4 { font-family: var(--t-text); font-stretch: 125%; font-weight: 560; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-l2); }
html[lang="he"] .plate-sub .first-task h4 { font-stretch: 100%; font-size: 13px; letter-spacing: .02em; text-transform: none; }
.plate-sub .setup-agents button { border: 0; border-radius: 12px; background: var(--field-bg); color: var(--ink-l2); font: 600 14.5px/1.2 var(--t-text); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.plate-sub .setup-agents button:hover { transform: none; color: var(--ink-l); box-shadow: inset 0 0 0 1px var(--hair-2); }
.plate-sub .setup-agents button[aria-selected="true"] { border: 0; background: #1B1B1E; color: var(--ink-l); box-shadow: inset 0 0 0 1.5px rgba(238,237,232,.72), 0 14px 30px -18px rgba(0,0,0,.9); }
.plate-sub .setup-includes { color: var(--ink-l2); }
.plate-sub .setup-includes span, .plate-sub .setup-includes a { font-family: var(--t-text); }
.plate-sub .setup-next, .plate-sub .copy-status { color: var(--ink-l2); }
/* the upgrade aside: More room to build, and the one orange button with its launch tag */
.plate-sub .starter-upgrade { background: var(--panel-bg-2); box-shadow: inset 0 0 0 1px var(--hair-2), 0 40px 90px -50px rgba(0,0,0,.9); }
.plate-sub .starter-upgrade.is-wanted { background: var(--panel-bg-2); box-shadow: inset 0 0 0 1.5px rgba(238,237,232,.6), 0 40px 90px -50px rgba(0,0,0,.9); }
.plate-sub .upgrade-heading .plan-badge.is-pro { background: var(--pill-white); color: #0C0C0E; }
.plate-sub .upgrade-buy { position: relative; }
.plate-sub #pro-price { font-family: var(--t-display); font-weight: 500; font-variation-settings: "opsz" 48; font-size: 30px; letter-spacing: -.01em; color: var(--ink-l); }
html[lang="he"] .plate-sub #pro-price { font-family: var(--t-text); font-weight: 700; font-size: 26px; }
.plate-sub .price-tax, .plate-sub .upgrade-fine { color: var(--ink-l2); }
.plate-sub .upgrade-fine a { color: var(--ink-l); }
/* the starter labs: four wall tiles */
.plate-sub .starter-labs { border-top: 0; }
.plate-sub .starter-labs a { border-radius: 12px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--hair); border: 0; transition: box-shadow .3s var(--ease), transform .45s var(--ease-out); }
.plate-sub .starter-labs a:hover { box-shadow: inset 0 0 0 1px var(--hair-2), 0 26px 60px rgba(0,0,0,.5); transform: translateY(-2px); }
.plate-sub .starter-labs img { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(236,240,242,.3); }
.plate-sub .starter-labs span { font: 600 15px/1.3 var(--t-text); color: var(--ink-l); }
.plate-sub .starter-labs small { color: var(--ink-l2); font-weight: 400; }

/* the launch offer: a paper tag on a string, hung off the Get Plate Pro pill. .ltag places it
   (and mirrors it right to left); .ltag-swing swings it, so the mirror applies after the swing. */
.plate-sub .ltag { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; }
.plate-sub .ltag-swing { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; rotate: 6deg; }
.plate-sub .ltag .str { position: absolute; left: 0; top: -6px; overflow: visible; }
.plate-sub .ltag .str path { fill: none; stroke: rgba(236,233,224,.85); stroke-width: 1.3; stroke-linecap: round; }
.plate-sub .ltag .tg { position: absolute; left: 24px; top: -16px; }
.plate-sub .ltag .sh { position: absolute; left: 10px; right: 2px; top: 4px; bottom: -1px; border-radius: 6px; box-shadow: 0 9px 20px rgba(0,0,0,.42), 0 2px 5px rgba(0,0,0,.3); }
.plate-sub .ltag .body { position: relative; display: block; height: 32px; padding: 0 13px 0 26px; overflow: hidden; background: #ECE9E0; color: #111113;
  font: 750 13.5px/32px var(--t-text); font-stretch: 125%; letter-spacing: .085em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); border-radius: 0 6px 6px 0; }
.plate-sub .ltag .txt { display: inline-block; }
.plate-sub .ltag .body::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #0B0B0C; box-shadow: inset 0 1px 1.5px rgba(0,0,0,.7); }
.plate-sub .ltag .body::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; transform: translateX(-120%);
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%); mix-blend-mode: screen; }
/* the aside is narrow: the short tag, as the landing uses on a phone */
.plate-sub .ltag .lo { display: none; }
/* It hangs off the pill's end, placed by anchor positioning because the price and the pill wrap
   onto two lines in the narrow aside. Where anchor positioning is not supported the tag is left
   out: it only repeats what the price already says. */
.plate-sub .upgrade-buy { flex-direction: column; align-items: flex-start; gap: 16px; }
.plate-sub #upgrade { anchor-name: --plate-pro; }
.plate-sub .upgrade-buy .ltag { position-anchor: --plate-pro; left: calc(anchor(--plate-pro right) - 7px); top: calc(anchor(--plate-pro top) + 15px); }
html[dir="rtl"] .plate-sub .upgrade-buy .ltag { left: auto; right: calc(anchor(--plate-pro left) - 7px); }
@supports not (anchor-name: --a) { .plate-sub .upgrade-buy .ltag { display: none; } }
/* released from above it swings to rest, glints once, and sways when the pill is hovered */
.plate-sub .upgrade-buy .ltag:not([hidden]) .ltag-swing { animation: ltag-drop 1.5s cubic-bezier(.3,0,.3,1) .5s both; }
.plate-sub .upgrade-buy .ltag:not([hidden]) .body::after { animation: ltag-glint 1.05s cubic-bezier(.35,0,.2,1) 1.25s 1 forwards; }
.plate-sub .upgrade-buy:has(#upgrade:hover) .ltag:not([hidden]) .ltag-swing { animation: ltag-sway 1.3s cubic-bezier(.3,0,.3,1) both; }
@keyframes ltag-drop { 0% { rotate: -62deg; opacity: 0; } 6% { opacity: 1; } 30% { rotate: 24deg; } 50% { rotate: -5deg; } 67% { rotate: 11deg; } 81% { rotate: 3.5deg; } 92% { rotate: 7deg; } 100% { rotate: 6deg; opacity: 1; } }
@keyframes ltag-sway { 0% { rotate: 6deg; } 22% { rotate: -16deg; } 46% { rotate: 14deg; } 66% { rotate: 1deg; } 84% { rotate: 8deg; } 100% { rotate: 6deg; } }
@keyframes ltag-glint { to { transform: translateX(300%); } }
/* right to left: the whole tag is mirrored so it hangs the other way; its words are turned back */
html[dir="rtl"] .plate-sub .ltag { transform: scaleX(-1); }
html[dir="rtl"] .plate-sub .ltag .txt { transform: scaleX(-1); }
html[dir="rtl"] .plate-sub .ltag .body { font-stretch: 100%; letter-spacing: .02em; font-weight: 700; }

/* the composer */
.plate-sub .composer { padding: clamp(20px, 2.6vw, 34px); }
.plate-sub .composer-guide > summary, .plate-sub .brief-preview-wrap > summary { color: var(--ink-l2); }
.plate-sub .pro-steps li > span, .plate-sub .entry-steps li > span { background: transparent; color: var(--ink-l); box-shadow: inset 0 0 0 1px var(--hair-2); border: 0; font-family: var(--t-display); font-weight: 500; }
.plate-sub .pro-surfaces { color: var(--ink-l2); }
.plate-sub .type-option span { border: 0; border-radius: 12px; background: var(--field-bg); box-shadow: inset 0 0 0 1px var(--hair); }
.plate-sub .type-option:hover span { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--hair-2); }
.plate-sub .type-option strong { font: 600 15px/1.2 var(--t-text); color: var(--ink-l); }
.plate-sub .type-option small { color: var(--ink-l2); font: 400 12.5px/1.4 var(--t-text); letter-spacing: 0; text-transform: none; }
.plate-sub .type-option input:checked + span { border: 0; background: #1B1B1E; box-shadow: inset 0 0 0 1.5px rgba(238,237,232,.72); }
.plate-sub .type-option input:checked + span strong { color: var(--ink-l); }
.plate-sub .type-option input:focus-visible + span { outline: 2px solid var(--ink-l); outline-offset: 2px; }
.plate-sub .mode-options, .plate-sub .filters, .plate-sub .client-tabs { background: rgba(11,11,12,.66); box-shadow: inset 0 0 0 1px var(--hair); border: 0; border-radius: 999px; padding: 5px; gap: 4px; }
.plate-sub .mode-options label, .plate-sub .filter, .plate-sub .client-tabs button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-l2);
  font: 500 14px/1 var(--t-text) !important; font-stretch: 100% !important; letter-spacing: 0 !important; text-transform: none !important; transition: background-color .2s var(--ease), color .2s var(--ease); }
.plate-sub .mode-options label:hover, .plate-sub .filter:hover, .plate-sub .client-tabs button:hover { color: var(--ink-l); }
.plate-sub .mode-options label:has(input:checked), .plate-sub .filter.active, .plate-sub .filter[aria-pressed="true"], .plate-sub .client-tabs button[aria-selected="true"] { background: var(--pill-white); color: #0C0C0E; }
.plate-sub .composer-meta { color: var(--ink-l2); }
.plate-sub .chip { border: 0; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink-l); }
.plate-sub .creative-notes, .plate-sub .composer .composer-actions { border-top-color: var(--hair); }
.plate-sub .save-state { color: var(--ink-l2); }
/* the handoff */
.plate-sub .handoff { background: var(--panel-bg); }
.plate-sub .handoff h2 { font-size: clamp(28px, 2.6vw, 38px); }
.plate-sub .handoff-lead, .plate-sub .handoff-dirty, .plate-sub .handoff-gate { color: var(--ink-l2); }
.plate-sub .handoff-help > summary { color: var(--ink-l2); }
/* saved briefs */
.plate-sub .briefs-head h2 { font-family: var(--t-display); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
html[lang="he"] .plate-sub .briefs-head h2 { font-family: var(--t-text); font-size: 19px; font-weight: 700; }
.plate-sub .brief-item { border-radius: 12px; background: var(--field-bg); box-shadow: inset 0 0 0 1px var(--hair); }
.plate-sub .brief-item:hover, .plate-sub .brief-item[aria-current="true"] { background: #1B1B1E; box-shadow: inset 0 0 0 1px var(--hair-2); border-left-color: transparent; }
.plate-sub .brief-item[aria-current="true"] { box-shadow: inset 0 0 0 1.5px rgba(238,237,232,.6); }
.plate-sub .brief-item .arrow { box-shadow: inset 0 0 0 1px var(--hair-2); }
.plate-sub .brief-item:hover .arrow { background: var(--pill-white); color: #0C0C0E; }
.plate-sub .briefs-empty { border: 0; border-radius: 12px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-l2); padding: 16px; }
.plate-sub .briefs-error { border: 0; border-radius: 12px; background: #1B1213; box-shadow: inset 0 0 0 1px rgba(229,72,77,.45); color: #FF9EA0; padding: 14px 16px; }

/* the library: wall tiles with a thin light rim */
.plate-sub .library-head { margin-bottom: 34px; }
.plate-sub .library h2 { font-size: clamp(38px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.015em; line-height: .98; margin-top: 4px; }
html[lang="he"] .plate-sub .library h2 { font-size: clamp(34px, 3.2vw, 48px); font-weight: 700; line-height: 1.08; }
.plate-sub .library-head .library-note { color: var(--ink-l2); margin-top: 14px; }
.plate-sub .library-grid { gap: 44px 22px; }
.plate-sub .lib-preview { border-radius: 6px; background: #050506; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.plate-sub .lib-preview::after { box-shadow: inset 0 0 0 1px rgba(236,240,242,.26); }
.plate-sub .lib-card:hover .lib-preview { transform: scale(1.02); box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.35); }
.plate-sub .lib-preview:hover img { transform: none; }
.plate-sub .lib-preview .open { left: 10px; bottom: 10px; padding: 7px 10px 6px; border-radius: 6px; background: rgba(11,11,12,.78); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--ink-l);
  font: 560 10.5px/1.3 var(--t-text); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; }
html[dir="rtl"] .plate-sub .lib-preview .open { left: auto; right: 10px; }
html[lang="he"] .plate-sub .lib-preview .open { font-stretch: 100%; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.plate-sub .lib-caption { padding: 16px 2px 0; gap: 14px; }
.plate-sub .lib-caption h3 { display: block; font-family: var(--t-display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: 22px; line-height: 1.05; letter-spacing: -.01em; }
html[lang="he"] .plate-sub .lib-caption h3 { font-family: var(--t-text); font-size: 17px; font-weight: 700; }
.plate-sub .lib-caption p { color: var(--ink-l2); font-size: 13px; margin-top: 6px; }
/* the Free tag: the landing's white tag */
.plate-sub .lib-card.is-free h3::after { display: inline-block; margin-inline-start: 10px; vertical-align: 4px; padding: 5px 7px 4px; border-radius: 5px; background: var(--pill-white); color: #0C0C0E; box-shadow: none;
  font: 750 10px/1 var(--t-text); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; }
html[lang="he"] .plate-sub .lib-card.is-free h3::after { font-stretch: 100%; font-size: 11.5px; letter-spacing: 0; }
.plate-sub .lib-open { min-height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-l); background: transparent; box-shadow: inset 0 0 0 1px var(--hair-3); }
.plate-sub .lib-open:hover, .plate-sub .lib-card:hover .lib-open { background: var(--pill-white); color: #0C0C0E; box-shadow: none; }
.plate-sub .lib-status-chip { color: var(--ink-l2); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--t-text); }
.plate-sub .lib-status { border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-l2); }
.plate-sub .lib-fallback p { color: var(--ink-l2); }
.plate-sub .sub-collection { border-color: var(--hair); }
.plate-sub .sub-collection > summary { font: 600 15px/1.3 var(--t-text); color: var(--ink-l); }
.plate-sub .library-return { margin-bottom: 20px; }

/* the community panel */
.plate-sub .community { padding: clamp(24px, 3.2vw, 48px); }
.plate-sub .community-head h2 { font-size: clamp(32px, 3.2vw, 48px); }
.plate-sub .community-head .button { background: var(--pill-white); color: #0C0C0E; box-shadow: none; }
.plate-sub .community-head .button .icon { width: 18px; height: 18px; }
.plate-sub .community-lead { color: var(--ink-l2); }
.plate-sub .community-mine { border-top-color: var(--hair); }
.plate-sub .community-mine .briefs-empty { background: none; box-shadow: none; padding: 0; }
.plate-sub .community-row { background: rgba(255,255,255,.02); }
.plate-sub .community-pill.is-approved { background: var(--pill-white); color: #0C0C0E; }
.plate-sub .community-form { background: rgba(255,255,255,.02); }

/* the dialog and the toast */
.plate-sub dialog { border: 0; border-radius: 16px; background: rgba(14,14,16,.97); color: var(--ink-l); padding: 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.5); }
.plate-sub dialog::backdrop { background: rgba(6,6,7,.72); }
.plate-sub dialog h2 { font-size: 30px; }
.plate-sub dialog p { color: rgba(238,237,232,.86); }
.plate-sub .toast { border-radius: 12px; background: var(--pill-white); color: #0C0C0E; font: 500 14px/1.45 var(--t-text); padding: 13px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }

/* ------------------------------------------------------------------ right to left */
html[dir="rtl"] .plate-sub .form-error { border-right-color: rgba(229,72,77,.8); }
html[dir="rtl"] .plate-sub .ws-cta { padding: 0 10px 0 24px; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plate-sub [data-view]:not([hidden]), .plate-sub .skeleton, .plate-sub .upgrade-buy .ltag:not([hidden]) .ltag-swing, .plate-sub .upgrade-buy .ltag:not([hidden]) .body::after { animation: none !important; }
  .plate-sub .button, .plate-sub .lib-preview, .plate-sub .entry-wall .sell-card { transition: none; }
}