/* Fixes on top of the illustrated theme (loaded last). */

/* 1. Headline: the word inside the selection cycles. */
.hero .sel-word { display: inline-block; transition: opacity .2s, transform .2s; }
.hero .sel-word.out { opacity: 0; transform: translateY(-.12em); }
@media (prefers-reduced-motion: no-preference) {
  .hero .sel.swap::before, .hero .sel.swap::after { animation: blob .4s cubic-bezier(.3,1.4,.5,1) both; }
  .hero .sel.swap .k { animation: snap .45s cubic-bezier(.3,1.6,.5,1) both; }
}

/* 6. The line under the hero button: short and centred under the button. */
.hero-copy > div:last-child { display: flex; flex-direction: column; align-items: flex-start; }
.hero .fine { max-width: 34ch; }
@media (min-width: 701px) {
  .hero-copy > div:last-child { display: inline-flex; align-items: center; }
  .hero .fine { text-align: center; }
}
@media (max-width: 700px) {
  .hero-copy .ctas { justify-content: center; }
  .hero .fine { text-align: center; margin-inline: auto; max-width: 30ch; }
}

/* 2. Phones: the demo's dots and caption sit on the cobalt field, so make them light. */
@media (max-width: 700px) {
  .show .tab { font-size: 0 !important; padding: 0 !important; width: 10px; height: 10px; border: 0 !important;
    color: transparent !important; background: rgba(255,255,255,.45) !important; }
  .show .tab[aria-selected="true"] { width: 46px; height: 14px; background: #ffdc3e !important;
    box-shadow: inset 0 0 0 2px #151719; }
  .show .tab-caption { color: #e3e9ff; max-width: 34ch; }
  .show .tab-caption b { color: #fff; }
}

/* 5. In the demo, Pluck's own capture UI (dimming, selection, bar, loupe)
   sits above the clipboard, as it does on a real Mac. */
#clip { z-index: 15 !important; }

/* 3. The product UI over each illustration is glass, like Pluck's panels. */
.product-evidence .ui {
  background: rgba(255, 250, 240, .58) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: 0 12px 32px rgba(23, 33, 62, .18), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}
.product-evidence .ui.dark {
  background: rgba(24, 28, 36, .84) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 12px 32px rgba(10, 14, 30, .3), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
/* Keep every card inside its frame; Safari needs the mask to clip blurred, rounded children. */
.illustrated-feature .media.illustrated-media { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.product-evidence { max-height: none; }
@media (max-width: 700px) {
  #f-history .media.illustrated-media { height: 360px; }
}

/* 4. QR codes: the code sits inside the illustration's selection frame, the card is centred. */
.feature-illustration.qr-art { display: flex !important; align-items: center; justify-content: center; }
.qr-art .qr-box { position: relative; width: min(100%, calc(236px * 1448 / 1086)); aspect-ratio: 1448 / 1086; }
.qr-art .qr-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.qr-art .qr-in-frame {
  position: absolute; left: 65.8%; top: 32.7%; width: 11.5%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-26deg);
  background: #fff; padding: 2.5px; border-radius: 3px; box-sizing: border-box;
}
.qr-art .qr-in-frame svg { display: block; width: 100%; height: 100%; }
.illustrated-feature:nth-of-type(10) .product-evidence > div { justify-content: center !important; }
@media (max-width: 700px) {
  .qr-art .qr-box { width: min(100%, calc(220px * 1448 / 1086)); }
}

/* Headline on phones: "Copy" on its own line, the cycling word on the next. */
@media (max-width: 700px) {
  .hero .sel { display: table; margin: .06em auto .02em; }
}

/* The demo's selection, drawn like the illustrations: a blue stroke with black corner handles. */
#lsel { border: 3px solid #1f4ff5 !important; box-shadow: none !important; border-radius: 1px; }
#lsel.rec { border-color: #fa5638 !important; }
#lsel .hk, #ghost .hk { position: absolute; width: 11px; height: 11px; border-radius: 3px; background: #151719; }
#lsel .hk.tl, #ghost .hk.tl { left: -7px; top: -7px; }
#lsel .hk.tr, #ghost .hk.tr { right: -7px; top: -7px; }
#lsel .hk.bl, #ghost .hk.bl { left: -7px; bottom: -7px; }
#lsel .hk.br, #ghost .hk.br { right: -7px; bottom: -7px; }
#size { background: #151719 !important; color: #fff !important; }
#ghost { border: 3px dashed #1f4ff5 !important; background: rgba(31, 79, 245, .08) !important; }

/* Try it yourself is for a mouse or trackpad; phones and tablets just watch. */
@media (hover: none), (pointer: coarse) {
  .try-btn { display: none !important; }
  #shield .prompt { display: none !important; }
  #shield, #shield:hover { background: transparent !important; cursor: default; }
}
html.is-mobile .try-btn, html.is-mobile #shield .prompt { display: none !important; }

/* ---- Revision 04 review ---- */

/* Headline: the word's room is reserved by JS (min-width), so centre it inside that room. */
.hero .sel-word { text-align: center; transition-duration: .18s; }

/* Fine print under the hero button. */
.hero .fine { font-size: 13px !important; line-height: 1.5; color: #62635e !important; margin-top: 11px !important; }

/* Anchor targets clear the sticky header (78px desktop, 64px phones). */
[id] { scroll-margin-top: 104px; }
@media (max-width: 820px) { [id] { scroll-margin-top: 84px; } }

/* Feature rows: links sit right under the description; the copy group is centred beside the art. */
@media (min-width: 701px) {
  .illustrated-feature { grid-template-rows: 1fr auto auto auto 1fr; }
  .illustrated-feature h3 { grid-row: 2; padding-top: 0; }
  .illustrated-feature p { grid-row: 3; }
  .illustrated-feature .links { grid-row: 4; margin-top: 20px; padding-bottom: 0; }
  .illustrated-feature .media.illustrated-media { grid-row: 1 / 6; }
}

/* Readable glass: more solid cream, larger labels. Safari mask clipping above stays. */
.product-evidence .ui {
  background: rgba(255, 250, 240, .9) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 12px !important;
}
.product-evidence .ui.dark { background: rgba(24, 28, 36, .9) !important; }
.product-evidence .ui [style*="font-size:9px"], .product-evidence .ui [style*="font-size:10px"],
.product-evidence .btns span { font-size: 11px !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-evidence .ui { background: #fffaf0 !important; }
  .product-evidence .ui.dark { background: #1c2028 !important; }
}

/* Badges: brand yellow and ink instead of mint. */
:root { --chip: #ffdc3e; }

/* ---- Option B (approved): logo left; links grouped beside the Download button ---- */
@media (min-width: 821px) {
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0; height: 80px; }
  .nav .brand { margin-right: auto; }
  .nav .links { gap: 28px; font-size: 15px; }
  .nav .right { margin-left: 30px; }
  .nav .nav-cta { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; }
}
@media (min-width: 821px) { [id] { scroll-margin-top: 106px; } }

/* Hero: one container with the header and demo; text and art pulled together. */
@media (min-width: 701px) {
  .hero { padding-top: 60px; padding-bottom: 48px; }
  .hero .top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .hero-art { align-self: center; }
  /* The art has transparent margins; let its box reach into the gap so the drawing
     itself is ~450px wide at 1440, without cropping or moving past the container. */
  .hero-illustration { width: calc(100% + 120px); max-width: none; max-height: none; margin-left: -120px; }
  .hero .show, .show { margin-top: 40px; }
}

/* ---- Option B: overlay compositions. Translucent material, kept inside each frame. ---- */
.product-evidence .ui {
  background: rgba(255, 250, 240, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.product-evidence .ui.dark { background: rgba(24, 28, 36, .86) !important; }

@media (min-width: 701px) {
  /* Default: drawing to the upper left, evidence card in the lower right, 22px clear of the edges. */
  .illustrated-feature .feature-illustration:not(.feature-gif) {
    left: 2% !important; top: 14px !important; width: 62% !important; height: calc(100% - 44px) !important;
    object-fit: contain; object-position: center top;
  }
  .illustrated-feature .product-evidence {
    left: auto !important; right: 22px !important; bottom: 22px !important; transform: none !important;
    width: min(50%, 330px) !important; max-height: calc(100% - 44px) !important; justify-content: flex-end !important;
  }
  .illustrated-feature .product-evidence > div { max-width: 100%; }
  /* The clipboard character: art up and left so the head and held files stay clear. */
  .illustrated-feature:nth-of-type(7) .feature-illustration { width: 58% !important; height: 250px !important; top: 8px !important; }
  .illustrated-feature:nth-of-type(7) .product-evidence { width: min(46%, 300px) !important; }
  /* Color: the girl and her frame on the left, the swatch low on the right. */
  .illustrated-feature:nth-of-type(5) .feature-illustration { width: 56% !important; }
  .illustrated-feature:nth-of-type(5) .product-evidence { width: 30% !important; }
  /* GIF keeps its centred recording; QR keeps its centred result card. Both stay inside the frame. */
  .illustrated-feature:nth-of-type(6) .product-evidence,
  .illustrated-feature:nth-of-type(10) .product-evidence { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; justify-content: center !important; }
  .illustrated-feature:nth-of-type(6) .product-evidence { width: 60% !important; bottom: 22px !important; }
  .illustrated-feature:nth-of-type(10) .product-evidence { width: 78% !important; }
  .illustrated-feature:nth-of-type(10) .feature-illustration { left: 8% !important; width: 84% !important; height: 220px !important; }
}

@media (max-width: 700px) {
  /* Phones: the art on top, the evidence in its own lower band, never cropped. */
  .illustrated-feature .media.illustrated-media, #f-history .media.illustrated-media {
    height: auto !important; display: flex !important; flex-direction: column; align-items: center; padding: 16px 16px 16px !important;
  }
  .illustrated-feature .feature-illustration:not(.feature-gif) {
    position: static !important; width: 100% !important; height: 190px !important; object-fit: contain;
  }
  .illustrated-feature .feature-gif { position: static !important; width: 70% !important; height: auto !important; aspect-ratio: 260 / 229; }
  .illustrated-feature .product-evidence {
    position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important;
    width: 100% !important; max-height: none !important; margin-top: -14px; justify-content: center !important;
  }
  .illustrated-feature:nth-of-type(6) .product-evidence { margin-top: 14px; height: auto !important; }
  .illustrated-feature:nth-of-type(6) .product-evidence > div > span { position: static !important; display: inline-block !important; }
  .illustrated-feature .product-evidence > div { max-width: 100%; }
  .qr-art .qr-box { width: 100% !important; }
}
@media (max-width: 700px) { .illustrated-feature:nth-of-type(6) .product-evidence > div { text-align: center; } }
/* A shadow that fits inside the 22px clearance, so the clipped frame never cuts it off. */
.product-evidence .ui { box-shadow: 0 6px 16px rgba(23, 33, 62, .16), inset 0 1px 0 rgba(255, 255, 255, .7) !important; }
.nav .get-pluck { white-space: nowrap; }

/* ---- Owner review, 7 October ---- */
/* Feature art centred again; the evidence card stays in the lower right and may overlap it. */
@media (min-width: 701px) {
  .illustrated-feature .feature-illustration:not(.feature-gif),
  .illustrated-feature:nth-of-type(5) .feature-illustration,
  .illustrated-feature:nth-of-type(7) .feature-illustration {
    left: 8% !important; width: 84% !important; top: 12px !important; height: 236px !important; object-position: center;
  }
  /* GIF: the recording and its timer, centred as a group in the frame. */
  .illustrated-feature:nth-of-type(6) .feature-gif { top: calc(50% - 134px) !important; }
  .illustrated-feature:nth-of-type(6) .product-evidence { bottom: calc(50% - 138px) !important; }
}
/* Pricing: equal cards, buttons on one line at the bottom. */
.plans { align-items: stretch; }
.plan { display: flex !important; flex-direction: column; gap: 18px; }
.plan .launch { margin-top: -8px; }
.plan > .btn { margin-top: auto; }
/* Footer: square top edge. */
footer { border-radius: 0 !important; }

/* ---- Owner review 2 ---- */
/* Headline: brackets open outward, then snap back with the new word. Uses `translate`
   so it never fights the load-in `transform` animation. */
.hero .sel.swap::before, .hero .sel.swap::after, .hero .sel.swap .k { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero .sel .k { transition: translate .2s cubic-bezier(.4, 0, .2, 1); }
  .hero .sel.open .tl { translate: -.17em -.13em; } .hero .sel.open .tr { translate: .17em -.13em; }
  .hero .sel.open .bl { translate: -.17em .13em; } .hero .sel.open .br { translate: .17em .13em; }
  .hero .sel.snap .k { transition: translate .4s cubic-bezier(.3, 1.8, .5, 1); }
  .hero .sel-word { transition: opacity .18s ease, transform .18s ease; }
  .hero .sel.snap .sel-word { transition-delay: .06s; }
}

/* Keys in the promo areas: solid ink keycaps. */
.move kbd, .illustrated-feature kbd {
  display: inline-block; font: 600 .82em/1 var(--mono, ui-monospace, monospace); letter-spacing: .02em;
  background: #151719; color: #fffaf0; border: 0; border-radius: 6px; padding: .32em .5em .3em;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(21, 23, 25, .25); vertical-align: .08em;
}
.move h3 kbd { font-size: .78em; }

/* "Watch it →": only the words are underlined. */
.more > span[aria-hidden] { display: inline-block; text-decoration: none; }

/* Demo: the decorative hand on the outer blue frame, under the real UI. */
.show { position: relative; overflow: hidden; }
.show .demo-hand { position: absolute; z-index: 5; left: 0; bottom: -28px; width: 30%; height: auto; pointer-events: none; user-select: none; }
@media (max-width: 1100px) { .show .demo-hand { display: none; } }

/* New feature art: centred, evidence lower right; key parts kept visible. */
@media (min-width: 701px) {
  .illustrated-feature .art-privacy { top: 18px !important; height: 210px !important; }
  .illustrated-feature .art-retrieve { top: 14px !important; height: 226px !important; }
  .illustrated-feature .art-bonjour { top: 12px !important; height: 236px !important; }
}
.more { text-decoration: none !important; }
.more .u { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.move p kbd, .illustrated-feature p kbd { font-size: .86em; }
@media (min-width: 701px) { .illustrated-feature:nth-of-type(7) .product-evidence { width: min(42%, 270px) !important; } }
/* Translate: centre the character, not the image box (the Hello bubble sits off to the right). */
.illustrated-feature .art-bonjour { object-position: calc(50% + 40px) 50%; }
@media (max-width: 700px) { .illustrated-feature .art-bonjour { object-position: calc(50% + 32px) 50%; } }