/* ============================================================================
   Vaizduok landing — light theme (white/ink, Archivo + Barlow Condensed +
   JetBrains Mono). Self-contained, class-based, loaded by app/page.tsx and
   app/pricing/page.tsx — the shared /assets/style.css (static SEO cluster) is
   untouched. Fonts loaded via <link> in each page.

   Went white on 2026-09-01 after auditing against nordvpn.com. Three rules
   from that audit are enforced below:
     1. Yellow is a BUTTON color, nothing else. It has no readable contrast as
        text on white, and when links/eyebrows/section backgrounds were all
        yellow the buy button stopped standing out at all.
     2. No section background banding. Sections are transparent and separated
        by whitespace and hairlines; NordVPN runs 12 sections with zero
        background switches and reads as one page, not stacked slides.
     3. Body text is 17px, not 16px (Nord uses 20px). Card headings lost their
        uppercase — uppercase measurably slows reading, so it is spent on
        h1/h2 only, where it is doing brand work.
   ========================================================================== */

:root {
  --mk-bg: #FFFFFF;
  --mk-bg2: #F6F5F2;
  --mk-border: #E6E4DF;
  --mk-border2: #DBD8D2;
  --mk-text: #1A1A1C;
  --mk-text-muted: #55535A;
  --mk-text-subtle: #6B6873;
  --mk-yellow: #FFE500;
  --mk-ink: #1E1E1E;

  --mk-font-display: var(--font-barlow), 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mk-font-body: var(--font-archivo), 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mk-font-mono: var(--font-jbmono), 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --mk-ease: cubic-bezier(.2,.7,.2,1);
  --mk-container: 1200px;
}

html, body { background: #FFFFFF; }

/* ---- root wrapper ---- */
.lp {
  position: relative; min-height: 100vh; overflow-x: clip;
  background: var(--mk-bg); color: var(--mk-text);
  font-family: var(--mk-font-body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp h1, .lp h2, .lp h3, .lp h4 { margin: 0; }
.lp p { margin: 0; }
/* Links are ink, not yellow: see rule 1 in the header block. */
.lp a { color: var(--mk-text); text-decoration: none; }
.lp img { display: block; max-width: 100%; }
.lp ::selection { background: var(--mk-yellow); color: var(--mk-ink); }
.lp :focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }
.lp [id] { scroll-margin-top: calc(72px + max(14px, env(safe-area-inset-top) + 8px)); }

.container { max-width: var(--mk-container); margin: 0 auto; padding: 0 20px; }

/* ============================== BUTTONS ============================== */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-family: var(--mk-font-body); font-weight: 700; cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-decoration: none; transition: transform 200ms var(--mk-ease), box-shadow 200ms var(--mk-ease), background 200ms var(--mk-ease), border-color 200ms var(--mk-ease), color 200ms var(--mk-ease); }
.btn-primary { background: var(--mk-yellow); color: var(--mk-ink); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30,30,30,0.16); color: var(--mk-ink); }
.btn-outline { border-color: var(--mk-border2); color: var(--mk-text); font-weight: 600; }
.btn-outline:hover { transform: translateY(-2px); border-color: var(--mk-ink); }
.btn-dark { background: var(--mk-ink); color: var(--mk-yellow); }
.btn-dark:hover { transform: translateY(-3px); background: #000; color: var(--mk-yellow); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-md { padding: 16px 28px; font-size: 15px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }
/* Buttons and nav links set their own text color — beat the generic `.lp a`
   color (a class+type selector ties it on specificity; `.lp .foo` is a
   double-class selector that outranks it regardless of source order). */
.lp .btn-primary, .lp .btn-primary:hover { color: var(--mk-ink); }
.lp .btn-outline, .lp .btn-outline:hover { color: var(--mk-text); }
.lp .btn-dark, .lp .btn-dark:hover { color: var(--mk-yellow); }
.lp .mk-login { color: var(--mk-text); }
.lp .mk-login:hover { color: var(--mk-text-muted); }

/* ============================== HEADER ============================== */
/* Floating glass pill, inset from every edge -- not a full-width bar. Sticky,
   no JS scroll listener, no transform: what broke edge-to-edge rendering on
   iOS Safari earlier was a *fixed*, transform-animated bar toggling via a
   scroll-driven show/hide effect -- a different mechanism from plain sticky.
   margin-top equals the sticky top offset so the pill sits at the same inset
   both before and after it starts sticking, with no jump at the threshold. */
.mk-header { position: sticky; top: max(14px, calc(env(safe-area-inset-top) + 8px)); z-index: 60; max-width: calc(var(--mk-container) - 40px); margin: max(14px, calc(env(safe-area-inset-top) + 8px)) auto 20px; padding: 0 12px; }
.mk-header-pill { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255,255,255,0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--mk-border); box-shadow: 0 6px 24px rgba(30,30,30,0.08); }
.mk-header-brand { display: flex; align-items: center; gap: 9px; }
.mk-header-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.mk-header-name { font-family: var(--mk-font-display); font-size: 21px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--mk-text); }
.mk-nav { display: none; align-items: center; gap: 10px 22px; font-size: 14px; font-weight: 500; }
.mk-nav a { position: relative; display: block; padding-bottom: 4px; color: var(--mk-text-muted); }
.mk-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--mk-ink); width: 0%; transition: width 260ms var(--mk-ease); }
.mk-nav a:hover { color: var(--mk-text); }
.mk-nav a:hover::after { width: 100%; }
.mk-header-actions { display: flex; align-items: center; gap: 12px; }
.mk-login { font-size: 14px; font-weight: 600; color: var(--mk-text); }
@media (min-width: 900px) { .mk-nav { display: flex; } }

/* ============================== HERO ============================== */
.hero { max-width: var(--mk-container); margin: 0 auto; padding: 24px 20px 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; align-items: center; }
.hero h1 { margin: 0 0 20px; font-family: var(--mk-font-display); font-size: clamp(46px, 7.4vw, 84px); line-height: 0.92; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
/* The accent word keeps the brand yellow as a *highlight behind ink text* —
   yellow type on white fails contrast at any weight. */
.hero h1 .accent { background: linear-gradient(transparent 58%, var(--mk-yellow) 58%); padding: 0 2px; }
.hero-sub { margin: 0 0 30px; max-width: 520px; font-size: 19px; line-height: 1.55; color: var(--mk-text-muted); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mk-text-subtle); }

/* ============================== STATS BAND ============================== */
.stats-band { border-top: 1px solid var(--mk-border); border-bottom: 1px solid var(--mk-border); }
.stats-band-inner { max-width: var(--mk-container); margin: 0 auto; padding: 34px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: center; }
.stats-counter-block { display: flex; flex-direction: column; gap: 4px; }
.stats-counter-num { font-family: var(--mk-font-display); font-size: 44px; font-weight: 800; line-height: 1; color: var(--mk-text); }
.stats-counter-label { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--mk-text-subtle); }
.stats-quote { border-left: 2px solid var(--mk-ink); padding: 2px 0 2px 16px; }
.stats-quote p { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: var(--mk-text); }
.stats-quote span { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mk-text-subtle); }

/* ============================== MARQUEE ============================== */
.marquee-wrap { border-bottom: 1px solid var(--mk-border); padding: 14px 0; overflow: hidden; }
/* Durations are 4x their original 30s/12s because app/page.tsx now renders four
   passes of MARQUEE per half instead of one. The animation moves -50% of the
   track either way, so without scaling the time the strip would simply run four
   times faster. Change MARQUEE_PASSES and these move with it. */
.marquee-track { display: flex; width: max-content; gap: 48px; animation: mkt-marquee 120s linear infinite; font-family: var(--mk-font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--mk-text-subtle); }
.marquee-wrap:hover .marquee-track { animation-duration: 48s; }
.marquee-item { display: flex; align-items: center; gap: 48px; }
.marquee-brand { display: flex; align-items: center; gap: 8px; }
.marquee-icon { width: 14px; height: 14px; object-fit: contain; opacity: 0.7; flex-shrink: 0; }
.marquee-item .sep { color: #A8A5A0; }

/* ============================ HOW IT WORKS ============================ */
.how-section { max-width: var(--mk-container); margin: 0 auto; padding: 84px 20px; }
.how-section h2 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.how-section > p { margin: 0 0 36px; font-size: 18px; color: var(--mk-text-muted); max-width: 560px; }
/* Explicit column counts rather than auto-fit: the connectors below need to know
   whether the cards sit in a row or a column, and auto-fit's in-between
   two-column state left an arrow pointing at nothing. */
.steps-grid3 { display: grid; grid-template-columns: 1fr; gap: 26px; }
.step-card { position: relative; background: var(--mk-bg2); border: 1px solid var(--mk-border); border-radius: 16px; padding: 24px; transition: transform 240ms var(--mk-ease), border-color 240ms var(--mk-ease), box-shadow 240ms var(--mk-ease); }
.step-card:hover { transform: translateY(-6px); border-color: var(--mk-border2); box-shadow: 0 18px 40px -22px rgba(30,30,30,0.35); }
/* The final step is the payoff, so it gets the page's one dark card instead of
   a yellow one — yellow now belongs to buttons only. */
.step-card.featured { background: var(--mk-ink); color: #F2F0EA; border-color: var(--mk-ink); }
.step-card.featured:hover { box-shadow: 0 18px 40px -20px rgba(30,30,30,0.55); }

/* Connector between steps. Without it three equal cards read as three unrelated
   features; the numbers alone were too quiet to carry the sequence. Lives in the
   grid gap, so the gap has to stay wider than the glyph. */
.step-card:not(:last-child)::after { content: "↓"; position: absolute; left: 58px; bottom: -20px; font-family: var(--mk-font-mono); font-size: 15px; line-height: 1; color: var(--mk-text-subtle); pointer-events: none; }

.step-thumb-wrap { position: relative; }
.step-thumb { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: var(--mk-bg); }
/* Marks 02 as a library preview rather than the visitor's own product. Without
   it the demo bottle in that shot reads as a third product photo — which is
   exactly how it was misread. Desktop only: at the 96px mobile thumbnail the
   chip does not fit, and there the title sits right beside the image anyway. */
.step-thumb-tag { display: none; position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,0.94); border: 1px solid var(--mk-border); font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--mk-ink); }

.step-num { font-family: var(--mk-font-mono); font-size: 11px; color: var(--mk-text-subtle); margin-bottom: 8px; letter-spacing: 0.14em; }
.step-card.featured .step-num { color: var(--mk-yellow); }
.step-card h3 { margin: 0 0 8px; font-family: var(--mk-font-display); font-size: 26px; font-weight: 700; }
.step-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mk-text-muted); }
.step-card.featured p { color: rgba(242,240,234,0.78); }

/* Below 900px each card turns horizontal: a 96px thumbnail beside the text
   instead of a full-width square above it. That takes the section from roughly
   1600px to 450px on a phone, so all three steps land on one screen — which is
   the only way the sequence reads as a sequence on mobile at all. */
@media (max-width: 899px) {
  .how-section { padding: 52px 20px; }
  /* Centred, not top-aligned: the body text runs taller than the 96px
     thumbnail by different amounts per step (15px on 01, 58px on 02 and 03),
     so top-aligning left a lopsided hole under the smaller images. Centring
     splits that space evenly and reads as deliberate. */
  .step-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
  .step-thumb-wrap { width: 96px; flex-shrink: 0; }
  .step-card h3 { font-size: 22px; }
  .step-card p { font-size: 14px; }
}

@media (min-width: 900px) {
  .steps-grid3 { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .step-thumb-wrap { margin-bottom: 16px; }
  .step-thumb-tag { display: block; }
  .step-card:not(:last-child)::after { content: "→"; left: auto; right: -20px; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* ============================ TEMPLATES ============================ */
.templates-section { border-top: 1px solid var(--mk-border); }
.templates-inner { max-width: var(--mk-container); margin: 0 auto; padding: 84px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.eyebrow-mono { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.18em; margin-bottom: 14px; color: var(--mk-text-subtle); }
.templates-inner h2 { margin: 0 0 14px; font-family: var(--mk-font-display); font-size: clamp(34px, 4.4vw, 50px); line-height: 0.98; font-weight: 800; text-transform: uppercase; }
.templates-inner > div > p { margin: 0 0 22px; font-size: 18px; line-height: 1.55; color: var(--mk-text-muted); max-width: 460px; }
/* Fixed column counts, not auto-fit: with auto-fit the column count drifted
   with the viewport (5, then 4, then 2) and the 9 previews left a ragged last
   row at most desktop widths. 3 columns x 3 rows on mobile, 5 x 2 from 1100px
   where the two-column section layout leaves the grid ~510px wide (cells stay
   ~96px, the old auto-fit minimum). The 10th preview only exists to fill the
   desktop row, so it is hidden below that breakpoint -- see TEMPLATE_IDS. */
.shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shots-grid .shot-cell:nth-child(10) { display: none; }
@media (min-width: 1100px) {
  .shots-grid { grid-template-columns: repeat(5, 1fr); }
  .shots-grid .shot-cell:nth-child(10) { display: block; }
}
.shot-cell { aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden; background: var(--mk-bg2); transition: transform 220ms var(--mk-ease), box-shadow 220ms var(--mk-ease); }
.shot-cell:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 26px -12px rgba(30,30,30,0.3); }
.shot-cell-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================== AVATARS ============================== */
.avatars-section { border-top: 1px solid var(--mk-border); }
.avatars-inner { max-width: var(--mk-container); margin: 0 auto; padding: 84px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
/* Square to match the source (vaizduok-ugc-*.webp is 800x800). At 4/5 the
   cover fit was cropping 20% off the sides for no reason and making the block
   469px tall on a phone — taller than the copy beside it on desktop, too. */
.avatar-feature { aspect-ratio: 1; border-radius: 16px; position: relative; overflow: hidden; background: var(--mk-bg2); transition: transform 240ms var(--mk-ease), box-shadow 240ms var(--mk-ease); }
.avatar-feature:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -20px rgba(30,30,30,0.4); }
.avatar-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-feature .tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(30,30,30,0.78); font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--mk-yellow); }
.avatars-inner h2 { margin: 0 0 14px; font-family: var(--mk-font-display); font-size: clamp(34px, 4.4vw, 50px); line-height: 0.98; font-weight: 800; text-transform: uppercase; }
.avatars-copy p { margin: 0 0 20px; font-size: 18px; line-height: 1.55; color: var(--mk-text-muted); max-width: 460px; }
.avatars-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.avatars-list li { display: flex; gap: 10px; }
.avatars-list li .arrow { color: var(--mk-text); font-weight: 700; }

/* ============================== PRICING ============================== */
/* The full cards live on /pricing; the landing carries the teaser below. */
.pricing-section { border-top: 1px solid var(--mk-border); }
.pricing-inner { max-width: var(--mk-container); margin: 0 auto; padding: 84px 20px; }
.pricing-head { text-align: center; margin-bottom: 36px; }
.pricing-head h2 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pricing-head p { margin: 0 auto; max-width: 560px; font-size: 18px; color: var(--mk-text-muted); }
.pricing-head p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.price-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; max-width: 860px; margin: 0 auto; }
.price-card2 { background: var(--mk-bg); border: 1px solid var(--mk-border2); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; transition: transform 240ms var(--mk-ease), border-color 240ms var(--mk-ease), box-shadow 240ms var(--mk-ease); }
.price-card2:hover { transform: translateY(-6px); border-color: var(--mk-ink); box-shadow: 0 22px 44px -26px rgba(30,30,30,0.35); }
/* The recommended pack is the page's dark card with a yellow button: the accent
   marks the action, not the panel. */
.price-card2.featured { background: var(--mk-ink); color: #F2F0EA; border-color: var(--mk-ink); }
.price-card2.featured:hover { box-shadow: 0 22px 44px -22px rgba(30,30,30,0.5); }
.price-card2-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.price-card2 h3 { margin: 0; font-family: var(--mk-font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; }
.price-tier-badge { padding: 4px 9px; border: 1px solid var(--mk-border2); border-radius: 999px; font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--mk-text-subtle); }
.price-card2.featured .price-tier-badge { background: var(--mk-yellow); color: var(--mk-ink); border: none; font-weight: 700; }
.price-amt2 { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.price-amt2 b { font-family: var(--mk-font-display); font-size: 54px; font-weight: 800; line-height: 1; }
.price-amt2 del { font-size: 14px; color: var(--mk-text-subtle); }
.price-card2.featured .price-amt2 del { color: rgba(242,240,234,0.5); }
.price-meta-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 18px; border-bottom: 1px solid var(--mk-border); margin-bottom: 18px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mk-text-muted); }
.price-card2.featured .price-meta-row { border-bottom-color: rgba(242,240,234,0.18); color: rgba(242,240,234,0.72); }
/* PricingButton renders <button class="pricing-btn"> */
.pricing-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 999px; font-family: var(--mk-font-body); font-weight: 700; font-size: 15px; cursor: pointer; transition: transform 200ms var(--mk-ease), background 200ms var(--mk-ease), border-color 200ms var(--mk-ease), color 200ms var(--mk-ease); }
.price-card2 .pricing-btn { background: var(--mk-yellow); border: none; color: var(--mk-ink); padding: 15px; }
.price-card2 .pricing-btn:hover { transform: translateY(-2px); background: #FFEC40; }
.price-card2 .pricing-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.price-list2 { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--mk-text-muted); }
.price-list2 li { display: flex; gap: 9px; }
.price-list2 li .ok { color: var(--mk-text); font-weight: 700; }
.price-list2 li.dim { color: var(--mk-text-subtle); }
.price-list2 li.dim .ok { color: var(--mk-text-subtle); }
.price-card2.featured .price-list2 { color: rgba(242,240,234,0.82); }
.price-card2.featured .price-list2 li .ok { color: var(--mk-yellow); }
.pricing-note { margin: 24px auto 0; max-width: 640px; text-align: center; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mk-text-subtle); }
/* The refund terms are two conditions, not one: within 14 days AND under half
   the credits used. The 10px mono line under each button carried both, but the
   summary line and the comparison table promised a bare "14-day refund" -- a
   gap wide enough to earn a chargeback. This block states both conditions at
   the point of purchase, at a size someone actually reads. */
.pricing-guarantee { max-width: 720px; margin: 32px auto 0; padding: 26px 28px; border: 1px solid var(--mk-border2); border-radius: 18px; text-align: center; }
.pricing-guarantee-title { margin: 0 0 12px; font-family: var(--mk-font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pricing-guarantee p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mk-text-muted); }
.pricing-guarantee p + p { margin-top: 14px; }
.pricing-guarantee a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pricing-guarantee .fine { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.9; color: var(--mk-text-subtle); }
/* Risk reversal sits directly under the buy button, not only in a collapsed FAQ
   row: this is the line that answers "what if it's bad" at the decision itself. */
.price-guarantee { margin: 10px 0 0; text-align: center; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-text-subtle); }
.price-card2.featured .price-guarantee { color: rgba(242,240,234,0.6); }

/* ---- landing pricing teaser (full cards live on /pricing) ---- */
.price-teaser-section { max-width: var(--mk-container); margin: 0 auto; padding: 84px 20px; }
.price-teaser { border: 1px solid var(--mk-border2); border-radius: 22px; padding: clamp(30px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.price-teaser h2 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.price-teaser p { margin: 0 0 16px; font-size: 18px; color: var(--mk-text-muted); max-width: 480px; }
.price-teaser-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mk-text-subtle); }

/* ---- /pricing extras ---- */
.pricing-compare { max-width: 860px; margin: 56px auto 0; }
.pricing-compare h3 { margin: 0 0 18px; font-family: var(--mk-font-display); font-size: 30px; font-weight: 800; text-transform: uppercase; text-align: center; }
.pricing-compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pricing-compare-table th, .pricing-compare-table td { padding: 14px 12px; border-bottom: 1px solid var(--mk-border); text-align: left; }
.pricing-compare-table th { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-subtle); font-weight: 500; }
.pricing-compare-table td:first-child { font-weight: 600; }
.pricing-compare-table td:last-child, .pricing-compare-table th:last-child { text-align: right; white-space: nowrap; }
.pricing-compare-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--mk-text-subtle); }

/* ============================== WHO IT'S FOR ============================== */
.who-section { max-width: var(--mk-container); margin: 0 auto; padding: 84px 20px; }
.who-section h2 { margin: 0 0 34px; font-family: var(--mk-font-display); font-size: clamp(32px, 4.2vw, 48px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.who-card { border-top: 2px solid var(--mk-ink); padding: 22px 0 0; }
.who-card h3 { margin: 0 0 8px; font-family: var(--mk-font-display); font-size: 27px; font-weight: 700; }
.who-card p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--mk-text-muted); max-width: 480px; }

/* ============================ FINAL CTA ============================ */
.final-cta-section { max-width: var(--mk-container); margin: 0 auto; padding: 0 20px 84px; }
.final-cta-card { background: var(--mk-ink); color: #F2F0EA; border-radius: 22px; padding: clamp(36px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.final-cta-card h2 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(34px, 5vw, 56px); line-height: 0.96; font-weight: 800; text-transform: uppercase; max-width: 560px; }
.final-cta-card p { margin: 0; font-size: 17px; color: rgba(242,240,234,0.75); }

/* ============================== FOOTER ============================== */
.mk-footer { border-top: 1px solid var(--mk-border); padding: 32px 20px 0; }
.mk-footer-row { max-width: var(--mk-container); margin: 0 auto; padding-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; font-size: 14px; color: var(--mk-text-subtle); }
.mk-footer-brand { display: flex; align-items: center; gap: 9px; }
.mk-footer-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.mk-footer-name { font-family: var(--mk-font-display); font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--mk-text); }
.mk-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.lp .mk-footer-links a, .lp .mk-footer-legal a { color: var(--mk-text-subtle); }
.lp .mk-footer-links a:hover, .lp .mk-footer-legal a:hover { color: var(--mk-text); }

/* ---- accepted payment methods ---- */
/* Only the brands Stripe actually presents for this account. The checkout
   session is card-only (payment_method_types: ["card"] in
   app/api/checkout/route.ts), so no iDEAL/Klarna/wallet marks belong here —
   advertising a method that never appears at checkout is worse than none. */
.mk-footer-pay { max-width: var(--mk-container); margin: 0 auto; padding: 22px 0 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--mk-border); }
.mk-footer-pay-label { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mk-text-subtle); margin-right: 6px; }
/* min-width, not width: the wallet marks are wider than the card marks
   (Discover 44px, Apple/Google Pay 42px vs Visa's 34px), so a fixed box would
   clip them. */
.mk-pay-card { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 30px; padding: 0 7px; border: 1px solid var(--mk-border); border-radius: 6px; background: #FFFFFF; flex-shrink: 0; }
.mk-pay-card svg { display: block; }
.mk-footer-secure { display: flex; align-items: center; gap: 7px; margin-left: auto; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--mk-text-subtle); }
@media (max-width: 640px) { .mk-footer-secure { margin-left: 0; width: 100%; } }
/* On a narrow phone the six marks total 376px and the row offers ~390px, so
   they fit on one line — but only if the label stops competing for it.
   Otherwise they split 4 + 2. */
@media (max-width: 560px) { .mk-footer-pay-label { flex-basis: 100%; margin: 0 0 2px; } }

.mk-footer-legal { max-width: var(--mk-container); margin: 0 auto; padding: 18px 0 28px; border-top: 1px solid var(--mk-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mk-text-subtle); }
.mk-footer-legal-links { display: flex; flex-wrap: wrap; gap: 16px; }

/* ============================== FAQ ============================== */
/* The section is what makes the FAQPage JSON-LD legitimate (schema must
   describe content that is actually on the page), so the two ship together. */
.faq-section { border-top: 1px solid var(--mk-border); }
.faq-inner { max-width: 820px; margin: 0 auto; padding: 84px 20px; }
.faq-head { margin-bottom: 30px; }
.faq-head h2 { margin: 0; font-family: var(--mk-font-display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--mk-border); }
.faq-item:last-child { border-bottom: 1px solid var(--mk-border); }
.faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--mk-font-body); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--mk-text); transition: color 200ms var(--mk-ease); }
.faq-btn:hover { color: var(--mk-text-muted); }
.faq-sign { flex-shrink: 0; font-family: var(--mk-font-mono); font-size: 22px; line-height: 1; color: var(--mk-text-subtle); }
.faq-ans { margin: 0; padding: 0 0 22px; max-width: 660px; font-size: 16px; line-height: 1.6; color: var(--mk-text-muted); }

/* ============================== AFFILIATES ==============================
   /affiliates used to be a static page on the old style.css system, with its
   own fonts, its own card shapes and emoji icons. These are the only rules it
   still needs of its own: the commission cards reuse .price-card2, the steps
   reuse .step-card, the reasons reuse .who-card and the payout terms reuse
   .pricing-guarantee, so the page inherits this file's type scale and spacing
   rather than restating them and drifting. */
.aff-hero { max-width: 860px; margin: 0 auto; padding: 72px 20px 64px; text-align: center; }
.aff-hero h1 { margin: 0 0 18px; font-family: var(--mk-font-display); font-size: clamp(44px, 7vw, 92px); font-weight: 800; text-transform: uppercase; line-height: 0.94; }
.aff-lead { margin: 0 auto 28px; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--mk-text-muted); }
.aff-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.aff-facts { justify-content: center; }
.aff-section { max-width: var(--mk-container); margin: 0 auto; padding: 72px 20px; }
.aff-section-head { max-width: 620px; margin: 0 auto 36px; text-align: center; }
.aff-section-head h2 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.aff-section-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--mk-text-muted); }
.aff-terms-section { padding-top: 0; }
.aff-inline-link { text-decoration: underline; text-underline-offset: 2px; }

/* ---- earnings calculator ---- */
.calc-card { max-width: 720px; margin: 0 auto; padding: clamp(26px, 4vw, 40px); background: var(--mk-bg2); border: 1px solid var(--mk-border2); border-radius: 22px; }
.calc-figure { text-align: center; }
.calc-amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 8px 0 6px; font-family: var(--mk-font-display); font-size: clamp(52px, 9vw, 88px); font-weight: 800; line-height: 1; }
.calc-amount span { font-family: var(--mk-font-mono); font-size: 14px; font-weight: 400; letter-spacing: 0.08em; color: var(--mk-text-subtle); }
.calc-sub { margin: 0; font-size: 16px; color: var(--mk-text-muted); }
.calc-control { margin: 30px 0 26px; }
.calc-label { display: flex; justify-content: center; margin-bottom: 12px; font-family: var(--mk-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--mk-border2); outline: none; cursor: pointer; }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--mk-ink); border: 4px solid var(--mk-yellow); cursor: grab; }
.calc-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--mk-ink); border: 4px solid var(--mk-yellow); cursor: grab; }
.calc-slider:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 6px; }
.calc-scale { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mk-text-subtle); }
.calc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 24px; border-top: 1px solid var(--mk-border); text-align: center; }
.calc-stat-num { display: block; font-family: var(--mk-font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 800; line-height: 1; }
.calc-stat-label { display: block; margin-top: 6px; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-text-subtle); }
.calc-note { margin: 20px 0 0; font-size: 13px; line-height: 1.6; text-align: center; color: var(--mk-text-subtle); }

/* ---- application modal ---- */
.apply-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(30,30,30,0.55); }
.apply-card { position: relative; width: 100%; max-width: 420px; padding: 32px 28px; background: var(--mk-bg); border: 1px solid var(--mk-border2); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(30,30,30,0.5); }
.apply-card h3 { margin: 0 0 8px; font-family: var(--mk-font-display); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.apply-lead { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--mk-text-muted); }
.apply-lead a { text-decoration: underline; text-underline-offset: 2px; }
.apply-close { position: absolute; top: 10px; right: 14px; padding: 4px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--mk-text-subtle); cursor: pointer; }
.apply-close:hover { color: var(--mk-text); }
.apply-field { margin-bottom: 14px; }
.apply-field label { display: block; margin-bottom: 6px; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-subtle); }
.apply-field input { width: 100%; padding: 12px 14px; background: var(--mk-bg2); border: 1px solid var(--mk-border2); border-radius: 10px; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-text); }
.apply-field input:focus { outline: none; border-color: var(--mk-ink); }
.apply-submit { width: 100%; justify-content: center; margin-top: 6px; }
.apply-submit:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.apply-msg { margin: 14px 0 0; font-size: 13px; text-align: center; color: var(--mk-text-muted); }
.apply-msg.err { color: #B3261E; }
.apply-success { text-align: center; }
.apply-check { width: 54px; height: 54px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mk-yellow); color: var(--mk-ink); font-size: 26px; font-weight: 800; }

/* ---- creator kit ---- */
.kit-code { padding: 2px 6px; border-radius: 5px; background: var(--mk-yellow); color: var(--mk-ink); font-family: var(--mk-font-mono); font-size: 0.9em; font-weight: 500; }
.kit-snippets { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
.kit-snippet { border: 1px solid var(--mk-border2); border-radius: 16px; padding: 22px 24px; background: var(--mk-bg); }
.kit-snippet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.kit-snippet-head h3 { margin: 0; font-family: var(--mk-font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.kit-snippet-note { display: block; margin-top: 4px; font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-subtle); }
/* pre keeps the line breaks the creator is meant to paste, so it wraps rather
   than scrolling sideways on a phone. */
.kit-snippet-body { margin: 0; padding: 18px; border-radius: 12px; background: var(--mk-bg2); font-family: var(--mk-font-body); font-size: 15px; line-height: 1.6; color: var(--mk-text-muted); white-space: pre-wrap; word-break: break-word; }

.kit-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.kit-asset { margin: 0; border: 1px solid var(--mk-border2); border-radius: 16px; overflow: hidden; background: var(--mk-bg); }
.kit-asset img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 18px; background: var(--mk-bg2); }
.kit-asset figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.kit-asset figcaption strong { display: block; font-size: 15px; }
.kit-asset figcaption span { display: block; margin-top: 2px; font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-text-subtle); }
.kit-asset-dl { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.kit-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; max-width: 860px; margin: 0 auto; }
.kit-rule-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.kit-rule-col li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--mk-text-muted); }
.kit-rule-col li .ok { color: var(--mk-text); font-weight: 700; }
.kit-rule-col li .no { color: #B3261E; font-weight: 700; }
.kit-rule-title { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--mk-ink); font-family: var(--mk-font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; }
.kit-rule-title.no { border-bottom-color: #B3261E; }

/* ========================= MOBILE SECTION RHYTHM ==========================
   Deliberately last in the file. These selectors are no more specific than the
   base rules they override (.avatars-inner and friends are single classes), so
   an earlier media block would simply lose on source order — which is exactly
   what happened the first time this was written up next to .how-section. */
@media (max-width: 899px) {
  /* 84px top and bottom on each section stacked to 168px of dead space at every
     boundary, about a fifth of a phone screen spent on nothing. */
  .templates-inner,
  .avatars-inner,
  .pricing-inner,
  .who-section,
  .price-teaser-section,
  .aff-section,
  .faq-inner { padding: 52px 20px; }
  .aff-hero { padding: 44px 20px 40px; }
  .aff-terms-section { padding-top: 0; }
  .final-cta-section { padding: 0 20px 52px; }

  .templates-inner, .avatars-inner { gap: 24px; }

  /* Copy first, image second: otherwise you scroll past a full-width photo
     before finding out what the section is about. */
  .avatars-inner .avatar-feature { order: 2; }
  .avatars-inner .avatars-copy { order: 1; }
}

/* ============================ KEYFRAMES / MOTION ============================ */
@keyframes mkt-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp .reveal,
    .lp .stagger > * {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
    @media (min-width: 901px) {
      .lp .stagger > :nth-child(2) { animation-range: entry 5% cover 29%; }
      .lp .stagger > :nth-child(3) { animation-range: entry 5% cover 38%; }
      .lp .stagger > :nth-child(4) { animation-range: entry 5% cover 47%; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp *, .lp *::before, .lp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- Katalogas (Crown & Paw tipo prekiu tinklelis) ----
   Taisykles kaip ir visur: geltona tik mygtukams, sekcija permatoma, kortele
   kaip .step-card (bg2 + hairline + 16px). 2 stulpeliai mobile, 4 nuo 900px. */
.catalog-section { max-width: var(--mk-container); margin: 0 auto; padding: 72px 20px 24px; }
.catalog-head { margin: 0 0 32px; }
.catalog-head h2 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.catalog-head > p { font-size: 18px; color: var(--mk-text-muted); max-width: 560px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.catalog-card { display: flex; flex-direction: column; background: var(--mk-bg2); border: 1px solid var(--mk-border); border-radius: 16px; overflow: hidden; transition: transform 240ms var(--mk-ease), border-color 240ms var(--mk-ease), box-shadow 240ms var(--mk-ease); }
.catalog-card:hover { transform: translateY(-6px); border-color: var(--mk-border2); box-shadow: 0 18px 40px -22px rgba(30,30,30,0.35); }
@media (prefers-reduced-motion: reduce) { .catalog-card, .catalog-card:hover { transition: none; transform: none; } }

.catalog-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ECEAE5; }
.catalog-media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--mk-border); font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mk-text-muted); }

/* vietos rezervavimo blokas, kol nera tikru pavyzdziu: drobe ant sienos */
.catalog-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 0%, #F4F2EE 0%, #E6E3DC 100%); }
.catalog-ph-canvas { width: 58%; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; background: #fff; border: 1px solid var(--mk-border2); box-shadow: 0 0 0 5px #F1EFEA, 0 22px 34px -18px rgba(30,30,30,0.5); }
.catalog-ph-canvas span { font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.14em; line-height: 1.5; color: var(--mk-text-subtle); }

.catalog-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.catalog-body h3 { margin: 0 0 6px; font-family: var(--mk-font-display); font-size: 24px; font-weight: 700; line-height: 1.05; }
.catalog-body p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--mk-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.catalog-price { font-family: var(--mk-font-display); font-size: 30px; font-weight: 800; line-height: 1; }
.catalog-price small { font-size: 18px; font-weight: 700; }
.catalog-go { font-size: 13px; font-weight: 700; }
.catalog-note { margin-top: 6px; font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--mk-text-subtle); }

/* ---- Produkto puslapis (/drobes/[slug]) ----
   Crown & Paw tipo išdėstymas: galerija kairėje (lipni), informacija dešinėje,
   akordeonai, žemiau idėjos / patarimai / DUK / kiti stiliai. Telefone lipni
   apatinė juosta su mygtuku. Geltona tik mygtukams. */
.pdp { max-width: var(--mk-container); margin: 0 auto; padding: 0 20px 40px; }
.pdp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 22px; font-size: 13px; color: var(--mk-text-subtle); }
.pdp-crumbs a { color: var(--mk-text-muted); }
.pdp-crumbs a:hover { color: var(--mk-text); text-decoration: underline; }
.pdp-crumbs [aria-current] { color: var(--mk-text); font-weight: 600; }

.pdp-top { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .pdp-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; } }

.pdp-gallery { min-width: 0; }
@media (min-width: 900px) { .pdp-gallery { position: sticky; top: 110px; } }
.pdp-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #ECEAE5; border: 1px solid var(--mk-border); }
.pdp-media img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.pdp-thumb { flex: 0 0 72px; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 10px; border: 2px solid transparent; background: var(--mk-bg2); cursor: pointer; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.is-active { border-color: var(--mk-ink); }

.pdp-info { min-width: 0; }
.pdp-info h1 { margin: 0 0 8px; font-family: var(--mk-font-display); font-size: clamp(36px, 5vw, 54px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pdp-tagline { margin-bottom: 20px; font-size: 18px; color: var(--mk-text-muted); }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.pdp-price-num { font-family: var(--mk-font-display); font-size: 44px; font-weight: 800; line-height: 1; }
.pdp-price-num small { font-size: 26px; font-weight: 700; }
.pdp-price-note { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mk-text-subtle); }

.pdp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 22px; padding: 14px 0; list-style: none; border-top: 1px solid var(--mk-border); border-bottom: 1px solid var(--mk-border); font-size: 14px; font-weight: 600; }
.pdp-trust li::before { content: "✓"; margin-right: 6px; }

.pdp-option { margin-bottom: 22px; }
.pdp-chip { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--mk-border2); font-size: 14px; font-weight: 700; }
.pdp-chip.is-selected { border-color: var(--mk-ink); background: var(--mk-ink); color: #fff; }
.pdp-option p { margin-top: 10px; font-size: 14px; color: var(--mk-text-muted); }

.pdp-steps { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.pdp-steps li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.pdp-steps li span { font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mk-text-subtle); }

.pdp-cta { width: 100%; justify-content: center; }
.pdp-cta-note { margin: 10px 0 24px; text-align: center; font-size: 13px; color: var(--mk-text-subtle); }

.pdp-acc details { border-top: 1px solid var(--mk-border); }
.pdp-acc details:last-child { border-bottom: 1px solid var(--mk-border); }
.pdp-acc summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; list-style: none; cursor: pointer; font-size: 16px; font-weight: 700; }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary::after { content: "+"; font-family: var(--mk-font-mono); font-size: 18px; }
.pdp-acc details[open] summary::after { content: "−"; }
.pdp-acc-body { padding: 0 0 16px; font-size: 15px; color: var(--mk-text-muted); }
.pdp-acc-body p + p { margin-top: 10px; }

.pdp-section { padding: 64px 0 0; }
.pdp-section h2 { margin: 0 0 20px; font-family: var(--mk-font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pdp-ideas { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .pdp-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pdp-idea { padding: 20px; border: 1px solid var(--mk-border); border-radius: 16px; background: var(--mk-bg2); font-family: var(--mk-font-display); font-size: 22px; font-weight: 700; line-height: 1.15; }
.pdp-tips { display: grid; gap: 10px; max-width: 720px; margin: 0; padding: 0; list-style: none; }
.pdp-tips li { position: relative; padding-left: 28px; font-size: 17px; }
.pdp-tips li::before { content: "→"; position: absolute; left: 0; font-family: var(--mk-font-mono); color: var(--mk-text-subtle); }
.pdp-honest { max-width: 720px; margin-top: 18px; font-size: 14px; color: var(--mk-text-subtle); }

/* kiti stiliai: telefone slenkama eilė, nuo 700px trys stulpeliai */
.pdp-more { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.pdp-more > .catalog-card { flex: 0 0 62%; scroll-snap-align: start; }
@media (min-width: 700px) {
  .pdp-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; }
  .pdp-more > .catalog-card { flex: initial; }
}

/* lipni apatinė juosta telefone. Dešinėje palikta vieta pokalbio burbului (fixed, z-60). */
.pdp-sticky { display: none; }
@media (max-width: 899px) {
  .pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 84px calc(12px + env(safe-area-inset-bottom)) 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--mk-border); }
  .pdp-sticky-price { display: flex; flex-direction: column; line-height: 1.1; }
  .pdp-sticky-price strong { font-family: var(--mk-font-display); font-size: 26px; font-weight: 800; }
  .pdp-sticky-price span { font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--mk-text-subtle); }
  .pdp-sticky .btn { padding: 13px 18px; font-size: 14px; }
  .lp:has(.pdp-sticky) { padding-bottom: 76px; }
}

/* ---- Visas katalogas (/drobes) ir nuoroda "Visi stiliai" ---- */
.catalog-more { display: flex; justify-content: center; margin-top: 28px; }
.catalog-head h1 { margin: 0 0 10px; font-family: var(--mk-font-display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.collection-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.collection-nav a { padding: 9px 16px; border: 1px solid var(--mk-border2); border-radius: 999px; font-size: 14px; font-weight: 600; transition: border-color 200ms var(--mk-ease), transform 200ms var(--mk-ease); }
.collection-nav a:hover { border-color: var(--mk-ink); transform: translateY(-1px); }
.collection-blurb { margin: -8px 0 20px; max-width: 560px; font-size: 16px; color: var(--mk-text-muted); }

/* ---- Dydžių pasirinkimas produkto puslapyje + "nuo" kortelėje ---- */
.catalog-price .catalog-from { margin-right: 2px; font-family: var(--mk-font-body); font-size: 13px; font-weight: 600; color: var(--mk-text-subtle); }
.pdp-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdp-size { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--mk-border2); border-radius: 12px; background: #fff; color: var(--mk-text); font-family: var(--mk-font-body); text-align: left; cursor: pointer; transition: border-color 200ms var(--mk-ease), background 200ms var(--mk-ease), color 200ms var(--mk-ease); }
.pdp-size span { font-size: 14px; font-weight: 700; }
.pdp-size strong { font-family: var(--mk-font-display); font-size: 22px; font-weight: 800; line-height: 1.1; }
.pdp-size:hover { border-color: var(--mk-ink); }
.pdp-size.is-selected { border-color: var(--mk-ink); background: var(--mk-ink); color: #fff; }
.pdp-size:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 3px; }

/* ---- Generavimo srautas (/generate) ir užsakymas (/uzsakymas/[id]) ----
   Tos pačios taisyklės: geltona tik mygtukams, kortelės kaip .step-card. */
.flow-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .flow-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; }
  .flow-grid-order { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.flow-card { padding: 22px; border: 1px solid var(--mk-border); border-radius: 16px; background: var(--mk-bg2); }
.flow-card h2 { margin: 6px 0 14px; font-family: var(--mk-font-display); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; }

.flow-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.flow-field label { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--mk-text-subtle); }
.flow-field input, .flow-field select, .flow-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--mk-border2); border-radius: 12px; background: #fff; color: var(--mk-text); font: inherit; font-size: 16px; }
.flow-field textarea { min-height: 96px; resize: vertical; }
.flow-field input:focus-visible, .flow-field select:focus-visible, .flow-field textarea:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.flow-field input[readonly] { background: var(--mk-bg2); color: var(--mk-text-muted); }
.flow-hint { font-size: 13px; color: var(--mk-text-subtle); }
.flow-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flow-error { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #F0B4B4; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 14px; }
.flow-banner { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--mk-ink); border-radius: 12px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.08em; }

.flow-quota { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.flow-dots { display: inline-flex; gap: 5px; }
.flow-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-border2); }
.flow-dots span.on { background: var(--mk-ink); }

.flow-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .flow-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flow-thumb { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 2px solid var(--mk-border); border-radius: 14px; background: #ECEAE5; cursor: pointer; transition: border-color 200ms var(--mk-ease), transform 200ms var(--mk-ease); }
.flow-thumb:hover { border-color: var(--mk-border2); transform: translateY(-2px); }
.flow-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flow-thumb.is-selected { border-color: var(--mk-ink); box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.16); }
.flow-thumb:disabled { opacity: 0.6; cursor: wait; }
.flow-thumb-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-family: var(--mk-font-mono); font-size: 9px; letter-spacing: 0.1em; }
.flow-skeleton { animation: flowpulse 1.2s ease-in-out infinite; cursor: default; }
@keyframes flowpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flow-skeleton { animation: none; } .flow-thumb, .flow-thumb:hover { transition: none; transform: none; } }
.flow-empty { padding: 36px 16px; border: 1px dashed var(--mk-border2); border-radius: 14px; text-align: center; font-size: 14px; color: var(--mk-text-subtle); }

.flow-summary { display: grid; gap: 8px; margin: 0 0 16px; font-size: 15px; }
.flow-summary > div { display: flex; justify-content: space-between; gap: 16px; }
.flow-summary dt { color: var(--mk-text-muted); flex: 0 0 auto; }
.flow-summary dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.flow-total { padding-top: 10px; border-top: 1px solid var(--mk-border); font-size: 18px; }
.flow-total dd { font-family: var(--mk-font-display); font-size: 28px; font-weight: 800; }

.flow-big { overflow: hidden; margin-top: 10px; border: 1px solid var(--mk-border); border-radius: 14px; background: #ECEAE5; }
.flow-big img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flow-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 16px; font-size: 14px; cursor: pointer; }
.flow-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mk-ink); }

.tl { display: flex; margin: 8px 0 16px; padding: 0; list-style: none; }
.tl li { position: relative; flex: 1; padding-top: 22px; text-align: center; font-size: 11px; line-height: 1.25; color: var(--mk-text-subtle); }
.tl li::before { content: ""; position: absolute; top: 5px; left: -50%; right: 50%; height: 2px; background: var(--mk-border2); }
.tl li:first-child::before { display: none; }
.tl-dot { position: absolute; top: 0; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--mk-border2); }
.tl li.done, .tl li.current { color: var(--mk-text); font-weight: 600; }
.tl li.done::before, .tl li.current::before { background: var(--mk-ink); }
.tl li.done .tl-dot { background: var(--mk-ink); }
.tl li.current .tl-dot { background: #fff; box-shadow: 0 0 0 3px var(--mk-ink); }

.flow-history { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--mk-text-muted); }
.flow-history li { display: flex; justify-content: space-between; gap: 12px; }

/* ---- Pasirinkto produkto kortelė generavimo puslapyje ---- */
.flow-chosen { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--mk-border2); border-radius: 14px; background: #fff; }
.flow-chosen .eyebrow-mono { margin-bottom: 4px; }
.flow-chosen strong { display: block; font-family: var(--mk-font-display); font-size: 24px; font-weight: 800; line-height: 1.05; }
.flow-chosen span { font-size: 14px; color: var(--mk-text-muted); }

/* ---- Teisiniai puslapiai ir slapukų juosta ---- */
.legal { max-width: 820px; }
.legal h1 { margin: 6px 0 4px; font-family: var(--mk-font-display); font-size: clamp(36px, 5vw, 54px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.legal h2 { margin: 36px 0 10px; font-family: var(--mk-font-display); font-size: 26px; font-weight: 800; line-height: 1.1; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal code { font-family: var(--mk-font-mono); font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--mk-bg2); }
.legal-meta { margin: 0 0 16px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mk-text-subtle); }
.legal-intro { font-size: 18px; color: var(--mk-text-muted); }
.legal-draft { margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--mk-ink); border-radius: 12px; background: #fff; font-family: var(--mk-font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; }
.legal mark { padding: 1px 5px; border-radius: 5px; background: #FFE9A8; color: var(--mk-ink); }
.legal-table { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--mk-border); border-radius: 12px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mk-border); }
.legal-table th { background: var(--mk-bg2); font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-subtle); }
.legal-table tr:last-child td { border-bottom: 0; }

.mk-link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mk-link-btn:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 3px; border-radius: 4px; }

.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.consent-inner { display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; padding: 18px 20px; border: 1px solid var(--mk-border2); border-radius: 16px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 50px -20px rgba(30, 30, 30, 0.45); }
@media (min-width: 800px) { .consent-inner { grid-template-columns: 1fr auto; align-items: center; } }
.consent strong#consent-title { font-family: var(--mk-font-display); font-size: 22px; font-weight: 800; }
.consent p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--mk-text-muted); }
.consent p a { text-decoration: underline; color: var(--mk-text); }
.consent-options { display: grid; gap: 8px; margin-top: 12px; }
.consent-options label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.consent-options input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mk-ink); flex: 0 0 auto; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-actions .btn { flex: 1 1 auto; justify-content: center; }

/* ---- 3D drobės peržiūra (CanvasPreview) ---- */
.cv-stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--mk-border); border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, #F6F4F0 0%, #E3DFD6 100%); perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cv-stage:active { cursor: grabbing; }
.cv-stage:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 3px; }
.cv-box { position: relative; transform-style: preserve-3d; }
.cv-box.is-eased { transition: transform 520ms var(--mk-ease); }
.cv-box.is-still, .cv-box.is-still.is-eased { transition: none; }
.cv-face { position: absolute; left: 50%; top: 50%; background-repeat: no-repeat; }
.cv-front { background-size: cover; background-position: center; background-color: #EDEAE4; }
.cv-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.1) 100%),
  repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.014) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.014) 0 1px, transparent 1px 4px); }
.cv-back { background: #EDE5D3; }
.cv-side { filter: brightness(0.9); }
.cv-top { filter: brightness(1.06); }
.cv-bottom { filter: brightness(0.7); }
.cv-left { filter: brightness(0.86); }
.cv-right { filter: brightness(0.74); }
.cv-shadow { position: absolute; bottom: 26px; left: 50%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); filter: blur(5px); }

.cv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.cv-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--mk-border2); border-radius: 999px; }
.cv-seg button { padding: 8px 16px; border: 0; background: #fff; color: var(--mk-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cv-seg button[aria-pressed="true"] { background: var(--mk-ink); color: #fff; }
.cv-seg button:focus-visible, .cv-btn:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.cv-btn { padding: 8px 16px; border: 1px solid var(--mk-border2); border-radius: 999px; background: #fff; color: var(--mk-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cv-btn[aria-pressed="true"] { background: var(--mk-ink); color: #fff; border-color: var(--mk-ink); }
.cv-hint { font-family: var(--mk-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-subtle); }

/* slapukų juosta yra už .lp ribų, todėl spalvos ir šriftas nustatomi čia */
.consent { color: var(--mk-text); font-family: var(--mk-font-body); }

/* ── Checkout: mokėjimo būdas ir sutikimai ── */
.flow-check span { flex: 1; line-height: 1.45; }
.flow-check a { text-decoration: underline; text-underline-offset: 2px; }
.pay-methods { margin: 0 0 16px; padding: 0; border: 0; display: grid; gap: 8px; }
.pay-methods legend { padding: 0; margin-bottom: 8px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mk-text-subtle); }
.pay-methods label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--mk-border2); border-radius: 12px; background: #fff; cursor: pointer; }
.pay-methods label.is-on { border-color: var(--mk-ink); box-shadow: 0 0 0 1px var(--mk-ink) inset; }
.pay-methods input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mk-ink); }
.pay-methods span { display: grid; gap: 2px; }
.pay-methods strong { font-size: 15px; }
.pay-methods small { font-size: 12.5px; color: var(--mk-text-subtle); }

/* Svetainė šviesi: Mercatus index.css buvo uždėjęs body { color-scheme: dark }, todėl nepažymėti
   langeliai ir radijo mygtukai atrodė užpildyti (kaip pažymėti). Tai klaidina, ypač sutikimų langeliuose. */
html, body { color-scheme: light; }

/* Mobilus išdėstymas: grid elementas negali būti platesnis už ekraną, o ilgesnis mygtuko tekstas
   („Užsakyti ir apmokėti 54,99 € (testinis)“) turi lūžti, o ne plėsti visą puslapį. */
.flow-grid > * { min-width: 0; }
.flow-card .btn { white-space: normal; text-align: center; }

/* ── Skiltys: gyvūnams / žmonėms ── */
.catalog-more { flex-wrap: wrap; gap: 10px; }
.aud-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.aud-btn { padding: 12px 14px; border: 1px solid var(--mk-border2); border-radius: 12px; background: #fff; color: var(--mk-text); font-family: var(--mk-font-body); font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color 200ms var(--mk-ease), background 200ms var(--mk-ease), color 200ms var(--mk-ease); }
.aud-btn:hover { border-color: var(--mk-ink); }
.aud-btn.is-on { border-color: var(--mk-ink); background: var(--mk-ink); color: #fff; }

/* ── Nuotraukos įkėlimas ── */
.photo-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--mk-border2); border-radius: 14px; background: #fff; }
.photo-card img { width: 96px; height: 120px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#ECEAE5 0% 25%, #F7F5F1 0% 50%) 50% / 16px 16px; }
.photo-card div { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.photo-card strong { font-size: 15px; }
.photo-card span { font-size: 13px; color: var(--mk-text-subtle); }
.photo-card .btn { margin-top: 6px; }

/* ── Pagrindinio puslapio 3D drobė (HeroCanvas) ── */
.hc { min-width: 0; }
.hc .cv-stage { border-radius: 20px; }
.hc-row { display: flex; justify-content: center; margin-top: 8px; }
.hc-dots button:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.hc-dots { display: inline-flex; align-items: center; }
.hc-dots button { padding: 10px 4px; border: 0; background: transparent; cursor: pointer; }
.hc-dots button span { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--mk-border2); transition: width 240ms var(--mk-ease), background 240ms var(--mk-ease); }
.hc-dots button[aria-current="true"] span { width: 22px; background: var(--mk-ink); }
.hc-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-family: var(--mk-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mk-text-subtle); }
.hc-caption a { color: var(--mk-ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .hc-dots button span { transition: none; } }

/* ── Hero: drobė ant sienos, minkštas pavyzdžių keitimas ── */
.cv-bare { perspective: 2600px; overflow: visible; border: 0; border-radius: 0; background: transparent; filter: drop-shadow(0 22px 24px rgba(52, 38, 22, 0.26)) drop-shadow(0 4px 6px rgba(52, 38, 22, 0.2)); }
.cv-bare:active { cursor: grabbing; }
.cv-bare .cv-shadow { display: none; }
.hc-wall { position: relative; overflow: hidden; border: 1px solid var(--mk-border); border-radius: 20px;
  background:
    radial-gradient(90% 70% at 30% 0%, rgba(255, 252, 246, 0.95) 0%, rgba(255, 252, 246, 0) 62%),
    linear-gradient(180deg, #ECE6DB 0%, #E5DED1 91%, #D6CCBC 91.2%, #CBBFAC 100%); }
.hc-wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgba(70, 55, 35, 0.1); }
.hc-layer { width: 100%; }
.hc-layer.is-out { position: absolute; inset: 0; pointer-events: none; animation: hcOut 900ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.hc-layer.is-in { animation: hcIn 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hcIn { from { opacity: 0; transform: translateY(14px) scale(0.965); } to { opacity: 1; transform: none; } }
@keyframes hcOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .hc-layer.is-out, .hc-layer.is-in { animation: none; } }

/* ── Paleidimo uždanga (LaunchTape): kryžminės juostos per VISĄ puslapį ant išmatinto fono ── */
.lt { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: auto;
  background: rgba(246, 243, 237, 0.62); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); }
.lt-tape { position: absolute; left: 50%; top: 50%; width: 240%; height: 46px; display: flex; align-items: center; overflow: hidden;
  background: var(--mk-yellow); color: var(--mk-ink); box-shadow: 0 10px 28px rgba(30, 30, 30, 0.28);
  border-top: 3px solid var(--mk-ink); border-bottom: 3px solid var(--mk-ink); }
.lt-a { transform: translate(-50%, -50%) rotate(-13deg); }
.lt-b { transform: translate(-50%, -50%) rotate(13deg); }
.lt-track { display: flex; width: max-content; font-family: var(--mk-font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.18em; white-space: nowrap; animation: ltMove 46s linear infinite; }
.lt-rev { animation-direction: reverse; }
.lt-seg { padding-right: 0.9em; }
@keyframes ltMove { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .lt-track { animation: none; } }
@media (max-width: 700px) { .lt-tape { height: 38px; } .lt-track { font-size: 12px; } .lt-a { transform: translate(-50%, -50%) rotate(-24deg); } .lt-b { transform: translate(-50%, -50%) rotate(24deg); } }