/* ————————————————————————————————————————————
   Nailly — nailly.app
   Editorial, warm, honest. Plum · gold · cream.
   ———————————————————————————————————————————— */

:root {
  --plum: #5E2C43;
  --plum-deep: #2C1320;
  --plum-soft: #7A4560;
  --gold: #E8CFA1;
  --gold-deep: #C9A96E;
  --cream: #F6F2EC;
  --paper: #FFFDF9;
  --ink: #2C1320;
  --ink-soft: #5d4450;
  --line: rgba(94, 44, 67, 0.14);
  --line-gold: rgba(232, 207, 161, 0.28);
  --shadow: 0 2px 24px rgba(44, 19, 32, 0.07);
  --shadow-lift: 0 12px 40px rgba(44, 19, 32, 0.12);
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--plum); text-decoration-color: rgba(94,44,67,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--plum); }

::selection { background: var(--plum); color: var(--gold); }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--plum-deep);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ——— eyebrow labels ——— */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum-soft);
  margin-bottom: 1.1rem;
}
.eyebrow.gold { color: var(--gold-deep); }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gold); }

/* ——— ornament divider ——— */
.orn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--gold-deep); margin: 0 auto;
}
.orn::before, .orn::after {
  content: ""; height: 1px; width: 64px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.orn::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }

/* ——— header ——— */
.site-header {
  background: var(--plum-deep);
  position: relative;
  z-index: 50;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 20px; gap: 24px;
}
.brand {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 1.65rem; color: var(--cream); text-decoration: none;
  letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px;
}
.brand:hover { color: var(--gold); }
.brand svg { width: 22px; height: 22px; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  color: rgba(246, 242, 236, 0.85); text-decoration: none;
  font-size: 0.95rem; letter-spacing: 0.02em;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  border: 1px solid var(--line-gold); border-radius: 999px;
  padding: 8px 18px !important; color: var(--gold) !important;
}
.nav-cta:hover { background: rgba(232, 207, 161, 0.1); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--cream);
  margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .25s;
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--plum-deep); flex-direction: column; align-items: flex-start;
    padding: 8px 24px 28px; gap: 20px; border-bottom: 1px solid var(--line-gold);
  }
  .nav-open .nav-links { display: flex; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ——— hero (home) ——— */
.hero {
  background:
    radial-gradient(ellipse 90% 70% at 75% 10%, rgba(232,207,161,0.13), transparent 55%),
    radial-gradient(ellipse 70% 60% at 15% 95%, rgba(122,69,96,0.5), transparent 60%),
    linear-gradient(160deg, var(--plum-deep) 30%, var(--plum) 100%);
  color: var(--cream);
  overflow: hidden;
  position: relative;
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px; align-items: center;
  padding-top: 96px; padding-bottom: 110px;
}
.hero h1 { color: var(--cream); margin: 0 0 1.4rem; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: rgba(246,242,236,0.85); max-width: 34em; }
.hero-art { justify-self: center; width: min(100%, 400px); }
.hero-art svg { width: 100%; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2.2rem; align-items: center; }
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 72px; gap: 36px; }
  .hero-art { width: min(58%, 260px); order: -1; }
}

/* ——— buttons & badge ——— */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: 14px 30px; border-radius: 999px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
  letter-spacing: 0.01em;
}
.btn-gold { background: var(--gold); color: var(--plum-deep); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.btn-plum { background: var(--plum); color: var(--cream); }
.btn-plum:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-ghost { border: 1px solid var(--line-gold); color: var(--gold); }
.btn-ghost:hover { background: rgba(232,207,161,0.08); }
.btn-ghost-plum { border: 1px solid var(--line); color: var(--plum); }
.btn-ghost-plum:hover { background: rgba(94,44,67,0.06); }

.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  border: none; border-radius: 14px;
  padding: 12px 22px; text-decoration: none;
  line-height: 1.25; color: var(--plum-deep);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  box-shadow: 0 10px 26px rgba(201,169,110,0.4);
  animation: badgeFloat 2.6s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s ease;
}
.store-badge:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 34px rgba(201,169,110,0.55);
}
.store-badge .apple { width: 26px; height: 26px; fill: currentColor; }
.store-badge small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.store-badge strong { font-size: 1.05rem; font-weight: 600; font-family: var(--serif); }
.store-badge.light { color: var(--plum-deep); background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); }

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 26px rgba(201,169,110,0.4); }
  50% { transform: translateY(-6px); box-shadow: 0 18px 32px rgba(201,169,110,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .store-badge { animation: none; }
}

/* ——— sections ——— */
.section { padding: 96px 0; }
.section-tight { padding: 72px 0; }
.section-head { max-width: 640px; margin-bottom: 3.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--ink-soft); margin-top: 1rem; font-size: 1.1rem; }
/* LIGHT-ONLY brand (user rule, matches the app): the former dark content
   bands render cream — plum lives only in the hero and the art cards. */
.dark { background: var(--cream); color: var(--ink); }
.dark h2, .dark h3 { color: var(--ink); }
.dark p, .dark .show p, .dark .show ul li { color: var(--ink-soft); }
.dark .show ul li::before { color: var(--plum); }
.dark a.more { color: var(--plum); text-decoration-color: rgba(94,44,67,0.4); }
.dark .eyebrow { color: var(--plum); }
@media (max-width: 820px) { .section { padding: 64px 0; } .section-tight { padding: 48px 0; } }

/* ——— 3-step loop ——— */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { position: relative; padding-top: 0.5rem; }
.step .num {
  font-family: var(--serif); font-size: 4.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gold-deep);
  display: block; margin-bottom: 0.6rem; font-style: italic;
}
.step h3 { margin-bottom: 0.7rem; }
.step p { color: var(--ink-soft); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 40px; } }

/* ——— alternating showcase ——— */
.show {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px);
  align-items: center; padding: 56px 0;
}
.show + .show { border-top: 1px solid var(--line); }
.show .art { order: 0; }
.show.flip .art { order: 1; }
.show h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 1rem; }
.show p { color: var(--ink-soft); }
.show .art-frame {
  background: linear-gradient(150deg, var(--plum-deep), var(--plum) 90%);
  border-radius: 24px; padding: clamp(28px, 4vw, 52px);
  box-shadow: var(--shadow-lift);
}
.show .art-frame.gold-frame { background: linear-gradient(150deg, #efe4cf, var(--gold)); }
.show ul { list-style: none; margin-top: 1.2rem; }
.show ul li { padding-left: 1.6em; position: relative; margin-bottom: 0.55em; color: var(--ink-soft); }
.show ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold-deep); }
.show .more { display: inline-block; margin-top: 1.3rem; font-weight: 600; text-decoration: none; }
.show .more::after { content: " →"; }
@media (max-width: 820px) {
  .show { grid-template-columns: 1fr; padding: 40px 0; }
  .show.flip .art { order: 0; }
}

/* ——— cards / grids ——— */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 28px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.card { text-decoration: none; display: block; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card h3 { margin-bottom: 0.55rem; font-size: 1.25rem; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .tag {
  display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 0.9rem; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--plum-soft);
}
.card .tag.artists { border-color: rgba(201,169,110,0.5); color: var(--gold-deep); }

/* ——— privacy band ——— */
.privacy-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; margin-top: 2.4rem; }
.privacy-list li { padding-left: 2em; position: relative; font-size: 1.05rem; }
.privacy-list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 16px; height: 16px;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 8.5 6.2 12.5 14 3.5" fill="none" stroke="%23E8CFA1" stroke-width="2" stroke-linecap="round"/></svg>');
}
@media (max-width: 720px) { .privacy-list { grid-template-columns: 1fr; } }

/* ——— pricing ——— */
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 820px) { .price-cards { grid-template-columns: 1fr; } }
.price-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 40px 36px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.price-card.featured { border-color: var(--gold-deep); border-width: 1.5px; position: relative; }
.price-card .who { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); }
.price-card .amount { font-family: var(--serif); font-size: 3.2rem; color: var(--plum-deep); margin: 0.7rem 0 0.1rem; line-height: 1; }
.price-card .amount small { font-size: 1.05rem; font-family: var(--sans); color: var(--ink-soft); }
.price-card .invite-note { color: var(--plum); font-weight: 600; margin-bottom: 0.4rem; }
.price-card ul { list-style: none; margin-top: 1.4rem; }
.price-card ul li { padding-left: 1.7em; position: relative; margin-bottom: 0.6em; color: var(--ink-soft); font-size: 0.98rem; }
.price-card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 15px; height: 15px;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 8.5 6.2 12.5 14 3.5" fill="none" stroke="%23C9A96E" stroke-width="2" stroke-linecap="round"/></svg>');
}
.free-week {
  text-align: center; margin-top: 2.6rem; padding: 22px 28px;
  border: 1px dashed rgba(201,169,110,0.6); border-radius: 16px;
  color: var(--ink-soft); background: rgba(232,207,161,0.12);
}
.free-week strong { color: var(--plum-deep); font-family: var(--serif); font-size: 1.15rem; }

/* ——— FAQ ——— */
.faq-group { margin-bottom: 3rem; }
.faq-group > h2 { font-size: 1.45rem; margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
details.qa {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 12px; overflow: hidden;
}
details.qa summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 22px;
  font-weight: 600; color: var(--plum-deep); position: relative; font-size: 1.02rem;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-size: 1.5rem; color: var(--gold-deep); transition: transform .2s;
}
details.qa[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.qa .a { padding: 0 22px 20px; color: var(--ink-soft); }

/* ——— page hero (interior pages) ——— */
.page-hero {
  background:
    radial-gradient(ellipse 80% 90% at 85% 0%, rgba(232,207,161,0.1), transparent 55%),
    linear-gradient(160deg, var(--plum-deep) 40%, var(--plum) 110%);
  color: var(--cream); padding: 72px 0 80px;
}
.page-hero h1 { color: var(--cream); max-width: 17em; }
.page-hero .lede { color: rgba(246,242,236,0.85); max-width: 40em; margin-top: 1.3rem; font-size: 1.15rem; }
@media (max-width: 820px) { .page-hero { padding: 52px 0 56px; } }

/* ——— article / prose ——— */
.prose { font-size: 1.1rem; }
.prose h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
.prose h3 { margin: 2rem 0 0.8rem; }
.prose p { margin-bottom: 1.25rem; }
.prose em { font-family: inherit; }
.prose strong { color: var(--plum-deep); }
.prose a { font-weight: 600; }
.article-meta { display: flex; gap: 14px; align-items: center; color: rgba(246,242,236,0.7); font-size: 0.9rem; margin-top: 1.4rem; }
.article-meta .dot::before { content: "·"; }

/* legal */
.legal-updated { color: rgba(246,242,236,0.7); margin-top: 1rem; font-size: 0.95rem; }
.prose.legal h2 { font-size: 1.4rem; }

/* ——— tie-in / cta band ——— */
.cta-band {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(232,207,161,0.12), transparent 60%),
    linear-gradient(160deg, var(--plum-deep), var(--plum) 130%);
  border-radius: 28px; color: var(--cream); text-align: center;
  padding: clamp(48px, 7vw, 84px) 32px;
}
.cta-band h2 { color: var(--cream); max-width: 18em; margin: 0 auto 1rem; }
.cta-band p { color: rgba(246,242,236,0.8); max-width: 36em; margin: 0 auto 2rem; }
.cta-band .hero-ctas { justify-content: center; margin-top: 0; }

/* ——— related links ——— */
.related { border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 2.5rem; }
.related h2 { font-size: 1.3rem; margin-bottom: 1.4rem; }

/* ——— breadcrumbs ——— */
.crumbs { font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 2rem; color: rgba(246,242,236,0.65); }
.crumbs a { color: rgba(246,242,236,0.85); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { margin: 0 8px; color: var(--gold-deep); }

/* ——— footer ——— */
.site-footer { background: var(--plum-deep); color: rgba(246,242,236,0.75); padding: 72px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { font-size: 1.5rem; margin-bottom: 0.9rem; }
.site-footer p { font-size: 0.93rem; max-width: 26em; }
.site-footer h4 {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem; font-weight: 600;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 0.55em; }
.site-footer a { color: rgba(246,242,236,0.75); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(232,207,161,0.15); margin-top: 52px; padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 0.85rem; color: rgba(246,242,236,0.55);
}

/* ——— scroll reveal ——— */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ——— tables (blog) ——— */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
th { font-family: var(--serif); color: var(--plum-deep); }

/* ── App hero art: the white line-art hands + faint leaves (same PNGs the app ships) ── */
.hero { position: relative; overflow: hidden; }
.hero-leaf { position: absolute; opacity: .12; pointer-events: none; width: min(34vw, 300px); }
.hero-leaf-left { bottom: -46px; left: -40px; transform: rotate(-10deg); }
.hero-leaf-right { bottom: -40px; right: -54px; transform: rotate(18deg); }
.hero-hands { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 34px); }
.hero-hand { width: clamp(120px, 16vw, 200px); height: auto; filter: drop-shadow(0 12px 34px rgba(0,0,0,.28)); animation: hand-float 7s ease-in-out infinite; }
.hero-hand-flip { transform: scaleX(-1); animation-delay: 1.4s; }
@keyframes hand-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (prefers-reduced-motion: reduce) { .hero-hand { animation: none; } }
@media (max-width: 720px) { .hero-hands { margin-top: 22px; } .hero-leaf { width: 44vw; } }
.brand .brand-n { width: auto; height: 22px; display: inline-block; }

/* ── Download dock ──────────────────────────────────────────────────────────
   A download link that stays put on every page, however far you scroll. It is
   the only thing on the site that asks for the install, so it sits above the
   content rather than in it — a centred pill on desktop, a full-width bar on a
   phone, where thumbs already expect the action to live.

   The footer would otherwise sit underneath it, so body carries matching
   padding; and env(safe-area-inset-bottom) keeps it clear of the iPhone home
   indicator. It is a plain <a> to the App Store, so the delegated click handler
   in site.js measures it as a conversion like every other store link.  */
body { padding-bottom: 5.5rem; }

.dl-dock {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.72rem 1.35rem 0.72rem 1.15rem;
  background: var(--plum-deep);
  color: var(--cream);
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(44, 19, 32, 0.34);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.dl-dock svg { width: 20px; height: 20px; flex: none; fill: var(--gold); }
.dl-dock-copy { display: flex; flex-direction: column; line-height: 1.15; }
.dl-dock-copy strong {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dl-dock-copy small {
  font-size: 0.72rem;
  color: var(--gold);
  opacity: 0.92;
}
.dl-dock:hover,
.dl-dock:focus-visible {
  background: var(--plum);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 16px 42px rgba(44, 19, 32, 0.42);
}
.dl-dock:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 640px) {
  /* Full width on a phone: the pill's tap target is the whole bar. */
  .dl-dock {
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    justify-content: center;
    border-radius: var(--r);
  }
  .dl-dock:hover,
  .dl-dock:focus-visible { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-dock { transition: none; }
  .dl-dock:hover, .dl-dock:focus-visible { transform: translateX(-50%); }
}

@media print { .dl-dock { display: none; } }

/* Comparison table — /best-nail-design-apps. Scrolls rather than squashes on a
   phone, and the row for our own app is marked so the page cannot be mistaken
   for a neutral review. */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 620px; }
.cmp th, .cmp td { padding: 0.8rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cmp tbody th { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; white-space: nowrap; }
.cmp tr.is-us { background: rgba(232, 207, 161, 0.16); }
.cmp tr.is-us th::after { content: " ●"; color: var(--gold-deep); }

/* Sister-app card — the other app from the same maker, in the footer. A genuine
   aside rather than a second pitch, so it sits under the store badge at a
   smaller weight than anything else in the column. */
.sister {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  max-width: 22rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.sister:hover, .sister:focus-visible {
  border-color: rgba(232, 207, 161, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
.sister-mark { font-size: 1.15rem; line-height: 1.4; flex: none; }
.sister small {
  display: block;
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.sister strong {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--cream);
}
.sister em {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(246, 242, 236, 0.62);
}