/* SnipSimple home page. Layout after Manus's 2026-10-21 version; every picture is the real app. */
:root {
  --home-ink: #111217;
  --home-muted: #5f6470;
  --home-paper: #ffffff;
  --home-mist: #f5f8fc;
  --home-line: #e3e7ee;
  --home-blue: #1964e8;
  --home-blue-deep: #174eb8;
  --home-shadow: 0 24px 68px rgba(20, 42, 78, .16), 0 3px 10px rgba(20, 42, 78, .08);
  --home-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --home-ink: #f4f7fb;
    --home-muted: #b3bdca;
    --home-paper: #0d1018;
    --home-mist: #121a27;
    --home-line: rgba(220, 232, 248, .14);
    --home-blue: #3a82f6;
    --home-blue-deep: #5394ff;
    --home-shadow: 0 24px 68px rgba(0, 0, 0, .5), 0 0 0 1px rgba(148, 170, 201, .22);
  }
}

.home-page { background: var(--home-paper); color: var(--home-ink); }
.home-page .wrap { max-width: 1216px; }
.home-page h1, .home-page h2, .home-page h3 { color: var(--home-ink); font-family: var(--home-display); }
.home-page .btn {
  border-radius: 13px; background: var(--home-blue);
  box-shadow: 0 5px 12px rgba(25, 100, 232, .2), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: transform .22s ease, background .22s ease;
}
.home-page .btn:hover { background: var(--home-blue-deep); transform: translateY(-1px); }
.home-page .btn-light { background: var(--card); color: var(--home-ink); box-shadow: inset 0 0 0 1px var(--home-line); }
.home-page .btn-light:hover { background: var(--home-mist); }
.home-page .nav .btn { color: #fff; }
.home-page section { overflow-x: clip; }

/* Hero */
.home-hero {
  isolation: isolate; overflow: hidden; position: relative; text-align: center;
  padding: 113px 0 72px;
  background:
    radial-gradient(ellipse 62% 44% at 50% 20%, rgba(215, 236, 255, .94), transparent 72%),
    linear-gradient(180deg, #fff 0%, #fbfdff 72%, #f6faff 100%);
}
.home-hero-inner { position: relative; z-index: 2; }
.hero-orbit { border: 1px solid rgba(77, 148, 246, .17); border-radius: 50%; position: absolute; z-index: 0; }
.orbit-one { height: 820px; left: calc(50% - 410px); top: -458px; width: 820px; }
.orbit-two { height: 1170px; left: calc(50% - 585px); top: -620px; width: 1170px; }
.eyebrow, .section-kicker {
  align-items: center; display: inline-flex; gap: 8px; margin: 0 0 18px;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase;
}
.eyebrow { color: #58606e; }
.section-kicker { color: var(--home-blue); }
.eyebrow-dot { background: var(--home-blue); border-radius: 99px; box-shadow: 0 0 0 4px rgba(25, 100, 232, .1); height: 6px; width: 6px; }
.home-hero h1 {
  font-size: clamp(3.2rem, 7.2vw, 6.3rem); font-weight: 750; letter-spacing: -.066em; line-height: .97;
  margin: 0 auto 25px; max-width: 940px;
}
.home-hero h1 span {
  background: linear-gradient(100deg, #174eb8, #2477ec 46%, #3a8bf4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-bottom: .08em;
}
.home-lead { color: var(--home-muted); font-size: clamp(1.06rem, 2vw, 1.3rem); line-height: 1.55; margin: 0 auto; max-width: 640px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; margin: 30px 0 12px; }
.home-primary { font-size: 1rem; min-height: 49px; padding: 13px 20px; }
.home-primary span { font-size: 1.2em; line-height: 1; transition: transform .2s ease; }
.home-primary:hover span { transform: translateX(3px); }
.text-action { color: #3c424d; font-size: .96rem; font-weight: 650; padding: 10px 2px; }
.text-action span { color: var(--home-blue); display: inline-block; margin-left: 5px; }
.text-action:hover { text-decoration: none; }
.hero-note { color: #737a86; font-size: .86rem; margin: 0; }

.hero-product-demo { margin: 56px auto 0; max-width: 1120px; position: relative; }
.hero-product-demo::before {
  background: radial-gradient(ellipse, rgba(47, 133, 255, .28), transparent 68%);
  content: ""; height: 320px; left: 12%; position: absolute; top: 40%; width: 76%; z-index: -1;
}
.product-demo-frame { aspect-ratio: 16 / 9; background: #e7edf6; border: 1px solid rgba(108, 134, 175, .22); border-radius: 18px; box-shadow: var(--home-shadow); overflow: hidden; position: relative; }
.demo-scene { align-items: stretch; display: flex; inset: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; transform: scale(.982); will-change: opacity, transform; }
.demo-edit { animation: demo-scene 15s cubic-bezier(.2, .65, .2, 1) infinite both; }
.demo-link { animation: demo-scene 15s cubic-bezier(.2, .65, .2, 1) 5s infinite both; background: radial-gradient(circle at 79% 24%, #d8e8ff 0, transparent 33%), linear-gradient(135deg, #e3edf9, #f9fbff 68%); }
.demo-style { align-items: center; animation: demo-scene 15s cubic-bezier(.2, .65, .2, 1) 10s infinite both; background: radial-gradient(circle at 19% 22%, rgba(255, 202, 169, .38), transparent 31%), linear-gradient(135deg, #eef3fb, #fdf9f6); justify-content: center; }
@keyframes demo-scene { 0%, 3% { opacity: 0; transform: scale(.982); } 7%, 29% { opacity: 1; transform: scale(1); } 33%, 100% { opacity: 0; transform: scale(1.014); } }
.demo-edit-image { display: block; height: 100%; object-fit: contain; width: 100%; }
.demo-edit::after { background: linear-gradient(90deg, rgba(9, 18, 31, .44), transparent 45%); content: ""; inset: 0; position: absolute; }
.demo-scene-copy { align-items: flex-start; background: rgba(12, 25, 44, .78); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; bottom: clamp(16px, 3.4vw, 38px); color: #fff; display: flex; gap: 13px; left: clamp(16px, 3.4vw, 38px); max-width: min(410px, 45%); padding: 14px 16px; position: absolute; z-index: 2; }
.demo-step { align-items: center; background: #2c7ff5; border-radius: 99px; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: .73rem; font-weight: 760; height: 27px; justify-content: center; letter-spacing: .04em; width: 27px; }
.demo-scene-copy small { color: #a9cdfd; display: block; font-size: .68rem; font-weight: 750; letter-spacing: .09em; margin: 1px 0 5px; text-transform: uppercase; }
.demo-scene-copy strong { color: #fff; display: block; font-size: clamp(.92rem, 1.55vw, 1.13rem); letter-spacing: -.025em; line-height: 1.15; }
.demo-scene-copy p { color: #d3ddeb; font-size: clamp(.72rem, 1.16vw, .86rem); line-height: 1.42; margin: 6px 0 0; }
.demo-scene-copy kbd { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .22); color: #fff; }
.demo-link-shot { align-self: center; margin-left: 11%; width: 71%; }
.demo-link-shot img { background: #fff; border: 1px solid rgba(60, 91, 136, .18); border-radius: 12px; box-shadow: 0 20px 40px rgba(47, 75, 117, .2); display: block; height: auto; width: 100%; }
.demo-link-toast { align-items: center; background: #132741; border: 1px solid rgba(137, 188, 255, .38); border-radius: 13px; box-shadow: 0 16px 34px rgba(31, 59, 96, .26); color: #fff; display: flex; gap: 12px; max-width: 330px; padding: 13px 15px; position: absolute; right: 5%; top: 10%; z-index: 2; }
.demo-key { align-items: center; background: rgba(126, 184, 255, .18); border: 1px solid rgba(143, 195, 255, .26); border-radius: 8px; color: #b6d9ff; display: inline-flex; flex: 0 0 auto; font-size: .93rem; font-weight: 720; height: 34px; justify-content: center; width: 42px; }
.demo-link-toast small { color: #8fc0ff; display: block; font-size: .67rem; font-weight: 760; letter-spacing: .08em; margin-bottom: 3px; text-transform: uppercase; }
.demo-link-toast strong { color: #fff; display: block; font-size: .92rem; letter-spacing: -.025em; }
.demo-link-toast p { color: #bbcbdf; font-size: .68rem; margin: 4px 0 0; }
.demo-link .demo-scene-copy { background: rgba(18, 35, 60, .88); }
.mini-settings-window { background: #f7f8fb; border: 1px solid rgba(89, 108, 142, .26); border-radius: 14px; box-shadow: 0 22px 50px rgba(45, 65, 98, .24); display: grid; grid-template-columns: 25% 1fr; grid-template-rows: 34px 1fr; height: 76%; overflow: hidden; width: 82%; }
.mini-settings-titlebar { align-items: center; background: #fbfbfc; border-bottom: 1px solid #e0e5ec; color: #596170; display: flex; font-size: .68rem; font-weight: 690; grid-column: 1 / -1; justify-content: center; position: relative; }
.traffic-lights { display: flex; gap: 5px; left: 12px; position: absolute; top: 50%; transform: translateY(-50%); }
.traffic-lights i { background: #ff605c; border-radius: 50%; display: block; height: 8px; width: 8px; }
.traffic-lights i:nth-child(2) { background: #ffbd44; }
.traffic-lights i:nth-child(3) { background: #00ca4e; }
.mini-settings-nav { background: #eef1f6; border-right: 1px solid #dfe4eb; color: #687180; display: flex; flex-direction: column; font-size: clamp(.62rem, 1vw, .78rem); gap: 5px; padding: 16px 10px; }
.mini-settings-nav span { border-radius: 5px; padding: 6px 8px; }
.mini-settings-nav .is-active { background: #dbe9ff; color: #1964e8; font-weight: 720; }
.mini-settings-content { padding: clamp(14px, 2.5vw, 26px); }
.mini-settings-heading { align-items: baseline; display: flex; gap: 9px; margin-bottom: 12px; }
.mini-settings-heading span { color: #1964e8; font-size: .67rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mini-settings-heading strong { color: #1b2433; font-size: clamp(.88rem, 1.45vw, 1.1rem); letter-spacing: -.035em; }
.mini-setting { align-items: center; border-top: 1px solid #e5e8ed; display: flex; justify-content: space-between; padding: clamp(7px, 1vw, 10px) 0; }
.mini-setting span { color: #697385; font-size: clamp(.62rem, .9vw, .75rem); }
.mini-setting b { background: #fff; border: 1px solid #d6dce5; border-radius: 5px; color: #313a49; font-size: clamp(.58rem, .84vw, .72rem); font-weight: 620; padding: 4px 7px; }
.mini-style-preview { align-items: center; background: #e9edf2; border: 1px solid #dde2ea; border-radius: 7px; display: flex; height: 27%; justify-content: center; margin-top: 10px; overflow: hidden; position: relative; }
.mini-style-preview img { height: 100%; object-fit: contain; width: 100%; }
.mini-style-preview span { background: rgba(19, 39, 66, .86); border-radius: 4px; bottom: 6px; color: #fff; font-size: clamp(.5rem, .7vw, .63rem); font-weight: 700; padding: 3px 5px; position: absolute; }
.demo-style .demo-scene-copy { background: rgba(24, 31, 44, .84); }
.hero-demo-caption { color: #5b6675; display: flex; flex-wrap: wrap; font-size: .88rem; gap: 8px 14px; justify-content: center; line-height: 1.45; margin: 22px auto 0; max-width: 760px; }
.hero-demo-caption strong { color: var(--home-ink); }
.hero-proof-list { border: 1px solid var(--home-line); border-radius: 14px; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 22px auto 0; max-width: 1000px; overflow: hidden; padding: 0; text-align: left; }
.hero-proof-list li { align-items: flex-start; display: grid; gap: 3px 10px; grid-template-columns: 24px 1fr; padding: 15px 18px; }
.hero-proof-list li + li { border-left: 1px solid var(--home-line); }
.hero-proof-list li > span { color: var(--home-blue); font-size: .69rem; font-weight: 780; line-height: 1.4; }
.hero-proof-list b { color: var(--home-ink); font-size: .9rem; letter-spacing: -.015em; }
.hero-proof-list small { color: var(--home-muted); font-size: .75rem; grid-column: 2; line-height: 1.4; }
.hero-proof-list kbd { font-size: .86em; }

/* Four promises, right under the hero */
.promise-section { background: var(--home-paper); padding: 40px 0 0; }
.promise-strip {
  border: 1px solid var(--home-line); border-radius: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; margin: 0; overflow: hidden; padding: 0;
}
.promise-strip li + li { border-left: 1px solid var(--home-line); }
.promise-strip a { color: inherit; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 28px; transition: background .2s ease; }
.promise-strip a:hover { background: var(--home-mist); text-decoration: none; }
.promise-word { color: var(--home-ink); font: 740 clamp(1.5rem, 2.5vw, 2.05rem)/1 var(--home-display); letter-spacing: -.05em; }
.promise-fact { color: var(--home-muted); font-size: .95rem; line-height: 1.5; }
.promise-fact kbd, .promise-fact code { white-space: nowrap; }
.promise-fact code { font-size: .84em; }
.kicker-num { color: var(--home-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.block-title { font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 730; letter-spacing: -.05em; line-height: 1.02; margin: 0 0 16px; }
.simple-block { border-top: 1px solid var(--home-line); margin-top: 96px; padding-top: 96px; }

/* 02 Light */
.light-section { background: var(--home-mist); }
.light-stats { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 56px 0 0; padding: 0; }
.light-stats li {
  background: var(--home-paper); border: 1px solid var(--home-line); border-radius: 16px;
  display: flex; flex-direction: column; gap: 10px; padding: 26px 22px;
}
.light-stats strong { color: var(--home-ink); font: 740 clamp(1.6rem, 2.6vw, 2.3rem)/1.02 var(--home-display); letter-spacing: -.05em; }
.light-stats span { color: var(--home-muted); font-size: .92rem; line-height: 1.45; }
.light-footnote { color: var(--home-muted); font-size: .86rem; margin: 22px 0 0; }

/* Section headings */
.workflow-section, .light-section, .pricing-section { padding: 124px 0; }
.section-intro { max-width: 720px; }
.section-intro h2, .pricing-intro h2, .download-content h2 {
  font-size: clamp(2.35rem, 5.1vw, 4.3rem); font-weight: 730; letter-spacing: -.06em; line-height: .99; margin: 0 0 19px;
}
.section-intro > p:last-child, .feature-copy > p, .style-heading > p, .pricing-intro > p, .download-content > p {
  color: var(--home-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; max-width: 600px;
}

/* Workflow */
.workflow-section { background: var(--home-paper); }
.workflow-list { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 60px 0 0; padding: 0; }
.workflow-step { display: flex; flex-direction: column; }
.step-shot {
  aspect-ratio: 8 / 5; border: 1px solid var(--home-line); border-radius: 14px; box-shadow: 0 12px 30px rgba(29, 48, 75, .1);
  margin-bottom: 22px; object-fit: cover; width: 100%;
}
.step-index { color: #8f99a8; display: block; font-size: .78rem; font-weight: 750; letter-spacing: .08em; margin-bottom: 8px; }
.workflow-step h3 { font-size: 1.38rem; letter-spacing: -.03em; margin: 0 0 8px; }
.workflow-step p { color: var(--home-muted); font-size: .97rem; line-height: 1.62; margin: 0; }

/* Toolbar feature */
.feature-layout { align-items: center; display: grid; gap: clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.feature-copy > p { margin-bottom: 28px; }
.toolbar-pic img { border-radius: 14px; margin: 0 0 22px -12px; max-width: min(520px, calc(100% + 12px)); width: 100%; }
.tool-list { list-style: none; margin: 0; padding: 0; }
.tool-list { display: grid; gap: 14px 28px; grid-template-columns: 1fr 1fr; }
.tool-list li { color: var(--home-muted); font-size: .92rem; line-height: 1.5; }
.tool-list b { color: var(--home-ink); display: block; font-size: .96rem; margin-bottom: 3px; }
.feature-shot, .quick-shot { margin: 0; }
.feature-shot img { border-radius: 16px; box-shadow: var(--home-shadow); width: 100%; }

/* Quick Capture */
.quick-layout { align-items: center; display: grid; gap: clamp(40px, 7vw, 100px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.quick-keys { display: grid; gap: 22px; margin: 34px 0 30px; }
.quick-key { align-items: center; display: flex; gap: 20px; }
.quick-key p { color: var(--home-muted); font-size: 1rem; line-height: 1.5; margin: 0; }
.quick-key b { color: var(--home-ink); }
.quick-key .combo { display: inline-flex; flex: none; gap: 6px; }
.quick-key .keycap { border-radius: 11px; font-size: 1.1rem; height: 46px; width: 46px; }
.quick-note { border-top: 1px solid var(--home-line); color: var(--home-muted); font-size: .88rem; line-height: 1.55; margin: 0; max-width: 540px; padding-top: 18px; }
.quick-shot img { background: #f6f6f8; border: 1px solid var(--home-line); border-radius: 14px; box-shadow: var(--home-shadow); margin: 0 auto; max-width: 440px; width: 100%; }

/* Style presets and filters (inside Shareable) */
.style-heading { align-items: end; display: flex; gap: 40px; justify-content: space-between; margin-bottom: 48px; }
.style-heading .block-title { margin-bottom: 0; }
.style-heading > p { flex: 0 1 460px; font-size: 1rem; }
.style-heading .section-kicker { margin-bottom: 12px; }
.style-demo-layout { align-items: center; display: grid; gap: clamp(32px, 6vw, 82px); grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr); }
.style-settings-card { background: #f7f8fb; border: 1px solid #dce2eb; border-radius: 16px; box-shadow: 0 18px 42px rgba(42, 62, 92, .13); overflow: hidden; }
.settings-card-titlebar { align-items: center; background: #fff; border-bottom: 1px solid #e2e6ed; color: #5d6673; display: flex; font-size: .78rem; font-weight: 680; height: 42px; justify-content: center; position: relative; }
.settings-card-body { display: grid; grid-template-columns: 29% 1fr; min-height: 340px; }
.settings-card-nav { background: #eef2f7; border-right: 1px solid #dee4ec; display: flex; flex-direction: column; font-size: .84rem; gap: 7px; padding: 24px 14px; }
.settings-card-nav span { border-radius: 7px; color: #697486; padding: 8px 10px; }
.settings-card-nav .is-active { background: #dceaff; color: #185ed3; font-weight: 730; }
.settings-card-content { padding: 30px clamp(20px, 4vw, 38px); }
.settings-card-heading { align-items: baseline; display: flex; gap: 12px; margin-bottom: 20px; }
.settings-card-heading > span { color: var(--home-blue); font-size: .71rem; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; }
.settings-card-heading h4 { color: #172033; font-size: 1.2rem; letter-spacing: -.035em; margin: 0; }
.settings-list { border-top: 1px solid #e2e7ee; margin: 0; }
.settings-list > div { align-items: center; border-bottom: 1px solid #e2e7ee; display: flex; justify-content: space-between; padding: 12px 0; }
.settings-list dt { color: #616c7d; font-size: .84rem; }
.settings-list dd { align-items: center; background: #fff; border: 1px solid #d5dce6; border-radius: 6px; color: #2d3747; display: flex; font-size: .78rem; font-weight: 640; gap: 18px; justify-content: space-between; margin: 0; min-width: 145px; padding: 5px 8px; }
.settings-list dd span { color: #798596; font-size: .9rem; line-height: .8; }
.settings-note { color: #6d7788; font-size: .78rem; line-height: 1.48; margin: 15px 0 0; }
.style-output-card { background: linear-gradient(145deg, #22324b, #14243c); border-radius: 17px; box-shadow: 0 20px 46px rgba(20, 36, 60, .24); color: #fff; margin: 0; overflow: hidden; padding: clamp(22px, 3vw, 34px); }
.style-output-label { color: #9bc3fb; font-size: .69rem; font-weight: 760; letter-spacing: .1em; margin: 0 0 16px; text-transform: uppercase; }
.style-output-preview { background: linear-gradient(135deg, #e7bd82, #755a63); border-radius: 11px; box-shadow: 0 12px 26px rgba(0, 0, 0, .26); margin: 0 auto 20px; max-width: 255px; overflow: hidden; padding: 13px; }
.style-output-preview img { border-radius: 5px; display: block; height: auto; width: 100%; }
.style-output-card strong { display: block; font-size: 1rem; letter-spacing: -.025em; }
.style-output-card > p:last-child { color: #c2d0e2; font-size: .84rem; line-height: 1.5; margin: 8px 0 0; }
.filter-heading { align-items: baseline; border-top: 1px solid var(--home-line); display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; margin-top: 54px; padding-top: 22px; }
.filter-heading strong { color: var(--home-ink); font-size: 1.02rem; letter-spacing: -.02em; }
.filter-heading span { color: var(--home-muted); font-size: .84rem; line-height: 1.5; max-width: 540px; }
.filter-ribbon { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 26px; }
.filter-card { margin: 0; transition: transform .25s ease; }
.filter-card:nth-child(odd) { transform: rotate(-1.4deg) translateY(10px); }
.filter-card:nth-child(even) { transform: rotate(1.2deg); }
.filter-card:hover { transform: translateY(-6px); }
.filter-card img {
  aspect-ratio: 1 / 1.25; border: 1px solid var(--home-line); border-radius: 13px; box-shadow: 0 12px 24px rgba(29, 48, 75, .1);
  object-fit: cover; width: 100%;
}
.filter-card figcaption { display: flex; flex-wrap: wrap; font-size: .9rem; font-weight: 700; gap: 2px 8px; justify-content: space-between; padding: 12px 3px 0; }
.filter-card figcaption small { color: #8a93a1; font-size: .7rem; font-weight: 650; padding-top: 3px; }
.style-footnote { color: var(--home-muted); font-size: .92rem; margin: 40px 0 0; text-align: center; }
.style-footnote a { color: var(--home-blue); font-weight: 650; }

/* 03 Shareable: dark link band, then the frames and filters */
.share-section { padding: 0; }
.share-link { background: #142641; color: #f5f8fd; overflow: hidden; padding: 124px 0; position: relative; }
.share-link::before {
  background: radial-gradient(circle, rgba(64, 138, 249, .26), transparent 69%);
  content: ""; height: 670px; left: -230px; position: absolute; top: -300px; width: 670px;
}
.share-layout { align-items: center; display: grid; gap: clamp(40px, 7vw, 100px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); position: relative; }
.share-layout h2 { color: #fff; font-size: clamp(2.35rem, 5.1vw, 4.3rem); font-weight: 730; letter-spacing: -.06em; line-height: .99; margin: 0 0 19px; }
.share-layout > div > p { color: #bdc8d7; font-size: 1.08rem; line-height: 1.6; margin: 0; max-width: 560px; }
.share-layout code { background: rgba(255, 255, 255, .1); color: #fff; }
.share-link .section-kicker { color: #86b8ff; }
.share-link kbd { background: rgba(255, 255, 255, .1); border-color: rgba(190, 216, 255, .35); color: #fff; }
.share-points { border-top: 1px solid rgba(194, 214, 242, .21); display: grid; gap: 18px 30px; grid-template-columns: 1fr 1fr; list-style: none; margin: 28px 0 24px; padding: 22px 0 0; }
.share-points li { color: #b8c8dc; font-size: .92rem; line-height: 1.5; }
.share-points b { color: #fff; display: block; font-size: 1.05rem; margin-bottom: 3px; }
.share-proof {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(190, 216, 255, .22); border-radius: 20px;
  display: flex; flex-direction: column; gap: 18px; margin: 0; padding: clamp(26px, 4vw, 44px);
}
.share-clip { color: #86b8ff; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.share-link .share-proof code { background: none; color: #fff; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.03em; line-height: 1.15; padding: 0; }
.share-proof figcaption { color: #b8c8dc; font-size: .92rem; line-height: 1.5; }
.inline-link { color: var(--home-blue); display: inline-flex; font-size: .94rem; font-weight: 700; gap: 8px; }
.share-link .inline-link { color: #99c4ff; }
.share-post { background: var(--home-mist); padding: 110px 0 124px; }

/* Pricing strip */
.pricing-section { background: #edf5ff; }
.pricing-layout { align-items: end; display: grid; gap: 54px; grid-template-columns: .8fr 1.2fr; }
.pricing-intro > p { margin-bottom: 26px; }
.price-summary {
  background: #fff; border: 1px solid #dbe7f4; border-radius: 18px; box-shadow: 0 18px 46px rgba(45, 93, 147, .11);
  display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden;
}
.price-summary article { padding: 32px 26px 28px; position: relative; }
.price-summary article + article { border-left: 1px solid #e6edf5; }
.price-summary article::before { background: #d3dfed; content: ""; height: 4px; left: 26px; position: absolute; top: 0; width: 35px; }
.price-summary .price-cloud { background: #f8fbff; }
.price-summary .price-cloud::before { background: var(--home-blue); }
.price-label { color: #69768a; font: 750 .75rem/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .08em; margin: 0 0 16px; text-transform: uppercase; }
.home-page .price-label { color: #69768a; }
.price-summary strong { color: #172135; display: block; font: 730 clamp(1.45rem, 2.4vw, 2rem)/1 var(--home-display); letter-spacing: -.05em; margin-bottom: 14px; }
.price-summary strong span { color: #77859a; font: 600 .76rem/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; }
.price-summary p { color: #5e6b7e; font-size: .88rem; line-height: 1.55; margin: 0; }
.price-summary p.price-trial { background: var(--home-blue); border-radius: 6px; color: #fff; display: inline-block; font-size: .74rem; font-weight: 700; margin-bottom: 12px; padding: 3px 8px; }

/* SnipSimple vs CleanShot X: a plain table, no motion */
.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.compare-section { background: var(--home-paper); padding: 124px 0; }
.compare-wrap { margin-top: 52px; }
.compare-table { border-collapse: separate; border-spacing: 0; font-size: 1rem; table-layout: fixed; width: 100%; }
.compare-table th, .compare-table td { border-bottom: 1px solid var(--home-line); line-height: 1.4; padding: 18px 20px; text-align: left; vertical-align: top; }
.compare-table thead th { border-bottom: 2px solid var(--home-ink); color: var(--home-ink); font: 740 1.25rem/1.1 var(--home-display); letter-spacing: -.03em; }
.compare-table thead th:first-child { width: 30%; }
.compare-table tbody th { color: var(--home-muted); font-size: .95rem; font-weight: 600; }
.compare-table td { color: var(--home-muted); }
.compare-table td b { color: var(--home-ink); display: block; font-size: 1.1rem; }
.compare-table td small { color: var(--home-muted); display: block; font-size: .84rem; margin-top: 4px; }
.compare-table .col-us { background: var(--home-mist); }
.compare-table thead .col-us { border-radius: 12px 12px 0 0; color: var(--home-blue); }
.compare-honest th, .compare-honest td { border-bottom: 0; }
.compare-small { color: var(--home-muted); font-size: .82rem; line-height: 1.55; margin: 26px 0 0; max-width: 780px; }
.promise-strip li { display: flex; flex-direction: column; }
.promise-strip li > a:first-child { flex: 1; }
.promise-strip .promise-vs { display: block; height: auto; color: var(--home-blue); font-size: .84rem; font-weight: 700; padding: 0 24px 22px; margin-top: -14px; }
.light-footnote a { color: var(--home-blue); font-weight: 650; }
.price-vs { margin-left: 18px; }

/* Download */
.download-section { background: var(--home-paper); isolation: isolate; overflow: hidden; padding: 130px 0; position: relative; text-align: center; }
.download-radiance {
  background: radial-gradient(ellipse, rgba(199, 224, 255, .95), rgba(239, 248, 255, .55) 45%, transparent 70%);
  height: 680px; left: 50%; position: absolute; top: -310px; transform: translateX(-50%); width: min(1050px, 160vw); z-index: -1;
}
.download-content { align-items: center; display: flex; flex-direction: column; }
.download-icon { filter: drop-shadow(0 15px 23px rgba(25, 100, 232, .23)); height: 80px; margin-bottom: 24px; width: 80px; }
.download-content > p:not(.section-kicker):not(.download-fine) { margin-bottom: 28px; }
.download-fine { color: #7d8693; font-size: .82rem; margin: 13px 0 0; }

@media (max-width: 920px) {
  .feature-layout, .quick-layout, .pricing-layout { grid-template-columns: minmax(0, 1fr); }
  .pricing-layout { align-items: start; }
  .workflow-list { gap: 40px; grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .style-heading { align-items: start; flex-direction: column; gap: 14px; }
  .style-heading > p { flex: none; }
  .style-demo-layout { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .style-output-card { display: grid; grid-template-columns: minmax(170px, .8fr) 1fr; gap: 12px 22px; margin: 0 auto; max-width: 540px; }
  .style-output-label { grid-column: 1 / -1; margin-bottom: 0; }
  .style-output-preview { grid-row: 2 / span 2; margin: 0; max-width: 180px; }
  .style-output-card > p:last-child { margin: 0; }
  .filter-ribbon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share-layout { grid-template-columns: minmax(0, 1fr); }
  .promise-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise-strip li:nth-child(3) { border-left: 0; }
  .promise-strip li:nth-child(n+3) { border-top: 1px solid var(--home-line); }
  .light-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .home-page .wrap { padding-left: 18px; padding-right: 18px; }
  .home-hero { padding: 72px 0 52px; }
  .home-hero h1 { font-size: clamp(2.85rem, 14vw, 4.15rem); line-height: .95; }
  .hero-actions { flex-direction: column; }
  .hero-product-demo { margin-top: 40px; }
  .product-demo-frame { aspect-ratio: 1 / 1; border-radius: 12px; }
  .demo-scene { animation: none; transform: none; }
  .demo-scene:not(.demo-edit) { display: none; }
  .demo-edit { opacity: 1; }
  .demo-edit-image { object-fit: contain; }
  .demo-edit::after { background: linear-gradient(0deg, rgba(9, 18, 31, .5), transparent 48%); }
  .demo-scene-copy { bottom: 14px; left: 14px; max-width: calc(100% - 28px); padding: 12px 13px; }
  .demo-scene-copy p { display: none; }
  .hero-demo-caption { font-size: .82rem; justify-content: flex-start; margin-top: 16px; text-align: left; }
  .hero-proof-list { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .hero-proof-list li + li { border-left: 0; border-top: 1px solid var(--home-line); }
  .workflow-section, .light-section, .pricing-section, .share-link { padding: 80px 0; }
  .share-post { padding: 72px 0 80px; }
  .simple-block { margin-top: 64px; padding-top: 64px; }
  .section-intro h2, .share-layout h2, .pricing-intro h2, .download-content h2 { font-size: clamp(2.25rem, 11vw, 3.3rem); }
  .promise-section { padding-top: 28px; }
  .promise-strip { grid-template-columns: minmax(0, 1fr); }
  .promise-strip li + li { border-left: 0; border-top: 1px solid var(--home-line); }
  .promise-strip a:first-child { flex-direction: row; align-items: baseline; gap: 14px; padding: 18px 18px 20px; }
  .promise-strip .promise-vs { margin-top: -8px; padding: 0 18px 18px calc(18px + 7.56rem + 14px); }
  .compare-section { padding: 80px 0; }
  .compare-table { font-size: .9rem; }
  .compare-table th, .compare-table td { padding: 14px 10px; }
  .compare-table thead th { font-size: 1rem; }
  .compare-table thead th:first-child { width: 34%; }
  .compare-table td b { font-size: .98rem; }
  .compare-table td small { font-size: .76rem; }
  .price-vs { margin: 16px 0 0; display: flex; }
  .promise-word { flex: 0 0 5.6em; font-size: 1.35rem; }
  .light-stats { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .light-stats li { padding: 18px 16px; }
  .light-stats li:last-child { grid-column: 1 / -1; }
  .light-stats strong { font-size: 1.45rem; }
  .tool-list, .share-points { grid-template-columns: minmax(0, 1fr); }
  .toolbar-pic img { margin-left: -6px; }
  .quick-key { align-items: flex-start; flex-direction: column; gap: 10px; }
  .settings-card-body { grid-template-columns: 33% 1fr; min-height: 300px; }
  .settings-card-nav { font-size: .75rem; padding: 18px 9px; }
  .settings-card-nav span { padding: 7px 8px; }
  .settings-card-content { padding: 22px 16px; }
  .settings-card-heading { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 14px; }
  .settings-list > div { gap: 8px; }
  .settings-list dd { font-size: .7rem; gap: 8px; min-width: 104px; }
  .style-output-card { display: block; }
  .style-output-label { margin-bottom: 16px; }
  .style-output-preview { margin: 0 auto 18px; max-width: 215px; }
  .filter-heading { margin-top: 40px; }
  .filter-ribbon { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-card:nth-child(n) { transform: none; }
  .price-summary { grid-template-columns: minmax(0, 1fr); }
  .price-summary article + article { border-left: 0; border-top: 1px solid #e6edf5; }
  .price-summary article::before { height: 35px; left: 0; top: 28px; width: 4px; }
  .download-section { padding: 96px 0; }
}

@media (prefers-color-scheme: dark) {
  .home-hero {
    background: radial-gradient(ellipse 60% 42% at 50% 16%, rgba(32, 92, 182, .38), transparent 70%),
      linear-gradient(180deg, #0d1018 0%, #101723 75%, #111a28 100%);
  }
  .hero-orbit { border-color: rgba(102, 167, 255, .16); }
  .eyebrow, .hero-note, .hero-demo-caption, .text-action { color: #b5bfcc; }
  .hero-demo-caption strong { color: #f4f7fb; }
  .product-demo-frame { background: #182233; border-color: rgba(166, 195, 232, .17); }
  .demo-link { background: radial-gradient(circle at 79% 24%, rgba(48, 113, 205, .38) 0, transparent 33%), linear-gradient(135deg, #19283c, #111923 68%); }
  .demo-style { background: radial-gradient(circle at 19% 22%, rgba(201, 120, 70, .22), transparent 31%), linear-gradient(135deg, #182231, #161820); }
  .mini-settings-window, .style-settings-card { background: #e8ebf0; }
  .step-shot, .filter-card img { box-shadow: none; }
  .home-page .btn-light { background: #1b2130; color: #f4f7fb; }
  .pricing-section { background: #111e31; }
  .price-summary { background: #171f2d; border-color: rgba(177, 205, 243, .13); box-shadow: none; }
  .price-summary article + article { border-color: rgba(177, 205, 243, .13); }
  .price-summary .price-cloud { background: #192641; }
  .price-summary strong { color: #f2f5fa; }
  .price-summary strong span, .home-page .price-label, .price-summary p:not(.price-trial) { color: #adbac9; }
  .download-radiance { opacity: .25; }
  .download-fine { color: #9aa5b4; }
}


/* Every app image is a light-mode capture of the real app. In dark mode it sits on a light neutral card. */
@media (prefers-color-scheme: dark) {
  .step-shot, .feature-shot img, .quick-shot img, .toolbar-pic img, .filter-card img {
    background: #eef0f4; border: 8px solid #e4e7ec; box-sizing: border-box;
  }
  .toolbar-pic img { border-width: 6px; }
}

/* No motion: show the still frame instead of the clip, and stop the hover lifts. */
@media (prefers-reduced-motion: reduce) {
  .demo-scene { animation: none; transform: none; }
  .demo-scene:not(.demo-edit) { display: none; }
  .demo-edit { opacity: 1; }
  .home-page *, .home-page *::before, .home-page *::after { transition: none !important; }
  .filter-card:hover { transform: none; }
}

/* Hero video (recorded in the real app). Reduced motion shows the still instead. */
.hero-video-frame { aspect-ratio: 16 / 9; display: block; overflow: hidden; padding: 0; }
.hero-video, .hero-video-still { display: block; height: auto; width: 100%; }
.hero-video-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-video-still { display: block; }
}
/* Step clips (from the same real-app take as the hero). Reduced motion shows the still. */
.step-video { display: block; height: auto; width: 100%; }
.step-still { display: none; }
@media (prefers-reduced-motion: reduce) { .step-video { display: none; } .step-still { display: block; } }
/* Small Quick Capture clip under the left column (same real-app take as the hero). Reduced motion shows the still. */
.quick-clip { margin-top: 28px; max-width: 420px; }
.quick-video, .quick-still { border: 1px solid var(--home-line); border-radius: 12px; box-shadow: 0 10px 26px rgba(29, 48, 75, .1); display: block; height: auto; width: 100%; }
.quick-still { display: none; }
@media (prefers-reduced-motion: reduce) { .quick-video { display: none; } .quick-still { display: block; } }
/* Custom link name (Cloud, not shipped yet): the part in front of snipsimple.app cycles through example names. */
.share-name { border-top: 1px dashed rgba(190, 216, 255, .28); display: flex; flex-direction: column; gap: 12px; padding-top: 22px; }
.share-soon { background: rgba(134, 184, 255, .16); border-radius: 999px; color: #cfe2ff; font-size: .68rem; letter-spacing: .04em; margin-left: 8px; padding: 3px 9px; text-transform: none; }
.share-sub { background: rgba(134, 184, 255, .2); border-radius: 6px; box-shadow: inset 0 -2px 0 #86b8ff; color: #fff; padding: 0 4px; }
.share-sub::before { animation: share-names 10s steps(1, end) infinite; content: "maya"; }
@keyframes share-names { 0% { content: "maya"; } 25% { content: "acme"; } 50% { content: "design"; } 75% { content: "studio"; } }
@media (prefers-reduced-motion: reduce) { .share-sub::before { animation: none; } }
.share-name p { color: #b8c8dc; font-size: .92rem; line-height: 1.5; margin: 0; }
.share-link .share-name code { font-size: clamp(1.05rem, 1.65vw, 1.45rem); }
/* The exported photo carries its own white Instagram border, so no painted frame around it. */
.style-output-preview { background: none; border-radius: 4px; max-width: 270px; padding: 0; }
.style-output-preview img { border-radius: 0; }