/* Spotter Otter modern UI v2 — scroll storytelling and polished light/dark surfaces. */

/* Keep the simple v1 story out of the way now that the scroll story replaces it. */
.so-v2 #soStory{display:none!important}
body[data-so-route="new"] #soAppleStory,body[data-so-route="spotters"] #soAppleStory,body[data-so-route="alerts"] #soAppleStory{display:none!important}
body[data-so-route="home"] #soAppleStory{display:block}

/* Apple-style scroll story */
.so-apple-scroll{position:relative;height:300vh;border-top:1px solid var(--so-line);border-bottom:1px solid var(--so-line);background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(220,235,219,.36),rgba(255,255,255,.12));overflow:clip}
.so-apple-stage{position:sticky;top:72px;height:calc(100svh - 72px);min-height:650px;display:flex;align-items:center;isolation:isolate}
.so-apple-stage::before{content:"";position:absolute;inset:8% 0;z-index:-1;pointer-events:none;background:radial-gradient(650px 420px at 72% 50%,rgba(184,229,113,.20),transparent 72%)}
.so-apple-grid{width:100%;display:grid;grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);align-items:center;gap:clamp(44px,7vw,100px)}
.so-apple-copy{max-width:520px}
.so-apple-kicker{color:var(--so-emerald);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;transition:opacity .28s ease,transform .28s ease}
.so-apple-title{margin:14px 0 0;color:var(--so-deep);font-size:clamp(46px,5.8vw,76px);line-height:.96;letter-spacing:-.06em;text-wrap:balance;transition:opacity .28s ease,transform .28s ease}
.so-apple-text{margin:20px 0 0;max-width:500px;color:var(--so-muted);font-size:18px;line-height:1.6;text-wrap:balance;transition:opacity .28s ease,transform .28s ease}
.so-apple-copy.is-changing .so-apple-kicker,.so-apple-copy.is-changing .so-apple-title,.so-apple-copy.is-changing .so-apple-text{opacity:.35;transform:translateY(5px)}
.so-scroll-progress{display:flex;gap:7px;margin-top:30px}.so-scroll-progress span{width:34px;height:5px;border-radius:999px;background:rgba(13,56,39,.13);transition:width .4s cubic-bezier(.2,.8,.2,1),background .35s}.so-scroll-progress span.on{width:54px;background:var(--so-emerald)}

.so-demo-device{position:relative;min-height:500px;padding:14px;border:1px solid rgba(13,56,39,.13);border-radius:40px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,245,237,.78));box-shadow:0 42px 110px rgba(13,56,39,.16),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:perspective(1400px) rotateY(-4deg) rotateX(1deg);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.so-demo-device:hover{transform:perspective(1400px) rotateY(-1deg) rotateX(0) translateY(-4px)}
.so-demo-screen{position:relative;height:472px;overflow:hidden;border:1px solid rgba(13,56,39,.10);border-radius:29px;background:linear-gradient(180deg,#fbfcf8,#f2f6ef)}
.so-demo-topbar{height:48px;display:flex;align-items:center;gap:7px;padding:0 17px;border-bottom:1px solid rgba(13,56,39,.08);font-size:11px;font-weight:850;color:var(--so-forest)}
.so-demo-topbar i{width:7px;height:7px;border-radius:50%;background:#51a875;box-shadow:0 0 0 5px rgba(81,168,117,.12)}
.so-demo-scene{position:absolute;inset:48px 0 0;padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(28px) scale(.975);pointer-events:none;transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)}
.so-demo-scene.on{opacity:1;transform:none;pointer-events:auto}
.so-demo-label{margin-bottom:11px;color:var(--so-emerald);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.so-demo-scene h3{max-width:500px;margin:0 0 22px;color:var(--so-deep);font-size:clamp(28px,3.2vw,39px);line-height:1.03;letter-spacing:-.045em}
.so-demo-search{padding:18px 20px;border:1px solid rgba(13,56,39,.12);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(13,56,39,.07);color:var(--so-ink);font-size:15px;line-height:1.45}
.so-demo-button{margin-top:11px;padding:14px 16px;border-radius:15px;background:linear-gradient(180deg,#1e8058,#155f42);color:#fff;text-align:center;font-size:13px;font-weight:900;box-shadow:0 12px 28px rgba(21,95,66,.20)}
.so-intent-box{padding:5px 18px;border:1px solid rgba(13,56,39,.11);border-radius:20px;background:rgba(255,255,255,.82);box-shadow:0 13px 35px rgba(13,56,39,.07)}
.so-intent-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(13,56,39,.08)}.so-intent-row:last-child{border:0}.so-intent-check{display:grid;place-items:center;width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:#e1f0dd;color:var(--so-emerald);font-size:11px;font-weight:900}.so-intent-row strong{display:block;color:var(--so-ink);font-size:12px}.so-intent-row small{display:block;margin-top:3px;color:var(--so-muted);font-size:11px;line-height:1.4}
.so-demo-alert{display:grid;grid-template-columns:92px 1fr;gap:15px;padding:14px;border:1px solid rgba(13,56,39,.11);border-radius:21px;background:#fff;box-shadow:0 17px 40px rgba(13,56,39,.09)}
.so-demo-img{display:grid;place-items:center;width:92px;height:92px;border-radius:16px;background:linear-gradient(145deg,#dfeadd,#f5f8ef);color:var(--so-emerald);font-size:30px}.so-demo-found{color:var(--so-emerald);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.so-demo-alert h4{margin:7px 0 8px;color:var(--so-deep);font-size:15px;line-height:1.3}.so-demo-price{font-size:21px;font-weight:900;color:var(--so-deep)}
.so-demo-notify{margin-top:12px;padding:12px 14px;border:1px solid rgba(27,119,82,.12);border-radius:15px;background:#edf6e8;color:var(--so-forest);font-size:11px;font-weight:800}

/* Make plans unmistakably visible without changing billing behavior. */
.so-v2 #plans{padding-top:112px!important;padding-bottom:116px!important;background:radial-gradient(620px 330px at 50% 34%,rgba(184,229,113,.13),transparent 72%)!important}
.so-v2 #plans .plans-intro{text-align:center;justify-content:center}.so-v2 #plans .plans-intro>div{margin-inline:auto}.so-v2 #plans .sectiontitle,.so-v2 #plans .lead{margin-left:auto!important;margin-right:auto!important}.so-v2 #plans .plan-grid{max-width:940px;margin:44px auto 0!important}.so-v2 #plans .plan-card{padding:32px!important;min-height:430px;display:flex!important;flex-direction:column}.so-v2 #plans .plan-card h3{font-size:28px!important;letter-spacing:-.04em!important}.so-v2 #plans .plan-speed{display:inline-flex!important;width:max-content;margin:10px 0 20px;padding:8px 11px;border-radius:999px;background:rgba(27,119,82,.07);color:var(--so-emerald)!important;font-size:11px!important}.so-v2 #plans .plan-features{flex:1}.so-v2 #plans .plan-note{max-width:820px;margin:22px auto 0!important;text-align:center}

/* Theme toggle is part of the new design, not a legacy afterthought. */
.so-v2 #themeToggle{min-height:42px!important;padding:0 12px!important;border:1px solid var(--so-line)!important;border-radius:13px!important;background:rgba(255,255,255,.62)!important;color:var(--so-forest)!important;box-shadow:0 6px 20px rgba(13,56,39,.045)!important}

/* Complete dark-mode treatment for the v2 additions. */
html[data-theme="dark"] .so-apple-scroll{background:linear-gradient(180deg,rgba(9,20,14,.18),rgba(18,42,28,.40),rgba(9,20,14,.18))}
html[data-theme="dark"] .so-apple-stage::before{background:radial-gradient(650px 420px at 72% 50%,rgba(87,145,82,.17),transparent 72%)}
html[data-theme="dark"] .so-scroll-progress span{background:rgba(232,242,234,.14)}html[data-theme="dark"] .so-scroll-progress span.on{background:var(--so-lime)}
html[data-theme="dark"] .so-demo-device{border-color:rgba(230,241,232,.12);background:linear-gradient(145deg,rgba(20,35,26,.95),rgba(12,26,18,.88));box-shadow:0 42px 110px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="dark"] .so-demo-screen{border-color:rgba(230,241,232,.09);background:linear-gradient(180deg,#101d15,#0c1811)}html[data-theme="dark"] .so-demo-topbar{border-color:rgba(230,241,232,.08);color:#b8e571}
html[data-theme="dark"] .so-demo-search,html[data-theme="dark"] .so-intent-box,html[data-theme="dark"] .so-demo-alert{background:#14231a;border-color:rgba(230,241,232,.10);box-shadow:none;color:#edf5ef}
html[data-theme="dark"] .so-intent-row{border-color:rgba(230,241,232,.08)}html[data-theme="dark"] .so-intent-check{background:#1d3827;color:#b8e571}html[data-theme="dark"] .so-demo-img{background:linear-gradient(145deg,#162b1e,#1b3424);color:#b8e571}html[data-theme="dark"] .so-demo-notify{background:#152d1f;border-color:rgba(184,229,113,.10);color:#c9e6b3}
html[data-theme="dark"] .so-v2 #plans{background:radial-gradient(620px 330px at 50% 34%,rgba(87,145,82,.10),transparent 72%)!important}html[data-theme="dark"] .so-v2 #plans .plan-speed{background:rgba(184,229,113,.08);color:#b8e571!important}html[data-theme="dark"] .so-v2 #themeToggle{background:rgba(18,35,25,.72)!important;color:#edf5ef!important}

.so-mobile-story{display:none}

@media(max-width:900px){.so-apple-grid{grid-template-columns:1fr;gap:24px}.so-apple-copy{max-width:720px;text-align:center;margin:auto}.so-apple-text{margin-left:auto;margin-right:auto}.so-scroll-progress{justify-content:center}.so-demo-device{width:min(620px,100%);margin:0 auto;min-height:390px;transform:none}.so-demo-screen{height:362px}.so-demo-scene{padding:26px}.so-apple-stage{top:112px;height:calc(100svh - 112px);min-height:760px}.so-apple-scroll{height:300vh}}
@media(max-width:650px){
  .so-apple-scroll{height:auto;overflow:visible}
  .so-apple-stage{display:none}
  .so-mobile-story{display:block;padding:64px 0 70px}
  .so-mobile-story-heading{text-align:center;margin:0 auto 24px}
  .so-mobile-story-heading h2{margin:9px 0 0;color:var(--so-deep);font-size:clamp(34px,10vw,44px);line-height:1;letter-spacing:-.05em}
  .so-mobile-story-list{display:grid;gap:12px}
  .so-mobile-story-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:20px 18px;border:1px solid var(--so-line);border-radius:20px;background:var(--so-white);box-shadow:0 10px 30px rgba(13,56,39,.07)}
  .so-mobile-story-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--so-line);border-radius:14px;background:var(--soft);color:var(--so-emerald);font-size:19px;font-weight:900}
  .so-mobile-story-step{color:var(--so-emerald);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
  .so-mobile-story-card h3{margin:6px 0 7px;color:var(--so-deep);font-size:20px;line-height:1.15;letter-spacing:-.03em}
  .so-mobile-story-card p{margin:0;color:var(--so-muted);font-size:13px;line-height:1.55}
  .so-v2 #plans{padding-top:78px!important;padding-bottom:88px!important}
  .so-v2 #plans .plan-card{min-height:0;padding:24px!important}
  .so-v2 #themeToggle #themeLabel{display:none}
}
@media(max-width:420px){
  .so-mobile-story{padding:52px 0 58px}
  .so-mobile-story-card{grid-template-columns:38px minmax(0,1fr);gap:11px;padding:17px 15px}
  .so-mobile-story-icon{width:38px;height:38px;border-radius:12px;font-size:17px}
  .so-mobile-story-card h3{font-size:18px}
}

@media(prefers-reduced-motion:reduce){.so-apple-copy *,.so-demo-device,.so-demo-scene,.so-scroll-progress span{transition:none!important}.so-demo-device{transform:none!important}}

/* New Spotter: one obvious input and action, with secondary choices tucked away. */
.so-v2 .watchinner{border:1px solid rgba(13,56,39,.17)!important;background:rgba(252,253,250,.94)!important;box-shadow:0 22px 60px rgba(13,56,39,.10)!important}
.so-v2 #searchDescription{min-height:142px!important;border:2px solid rgba(13,56,39,.30)!important;background:#fff!important;color:#13251c!important;box-shadow:0 8px 24px rgba(13,56,39,.08),inset 0 1px 0 rgba(255,255,255,.9)!important}
.so-v2 #searchDescription::placeholder{color:#69776e!important;opacity:1!important}
.so-v2 #searchDescription:focus{border-color:#1b7752!important;box-shadow:0 0 0 4px rgba(27,119,82,.13),0 10px 28px rgba(13,56,39,.10)!important}
.so-v2 #searchDescriptionHelp{margin:9px 4px 0!important;color:#5b6a61!important}
.so-v2 #createBtn.search-primary-action{min-height:58px!important;margin-top:13px!important;font-size:16px!important;letter-spacing:-.01em!important}
.so-v2 .search-submit-hint{margin:8px 4px 0;color:#66736b;font-size:11px;line-height:1.4;text-align:center}
.so-v2 #imageSearch,.so-v2 #manualSearchDetails{border:1.5px solid #bcc9c0!important;background:#f4f7f2!important;box-shadow:none!important}
.so-v2 #imageSearch>summary,.so-v2 #manualSearchDetails>summary{color:#174d37!important}
.so-v2 #manualSearchDetails{margin-top:9px!important}
.so-v2 #manualSearchDetails>summary span{color:#6c786f;font-size:11px;font-weight:700}

html[data-theme="dark"] .so-v2 .watchinner{border-color:rgba(226,240,229,.20)!important;background:#10251a!important;box-shadow:0 22px 60px rgba(0,0,0,.28)!important}
html[data-theme="dark"] .so-v2 #searchDescription{border-color:rgba(184,229,113,.48)!important;background:#081a11!important;color:#f2f7f3!important;box-shadow:0 9px 28px rgba(0,0,0,.24)!important}
html[data-theme="dark"] .so-v2 #searchDescription::placeholder{color:#aebbb2!important}
html[data-theme="dark"] .so-v2 #searchDescription:focus{border-color:#b8e571!important;box-shadow:0 0 0 4px rgba(184,229,113,.14),0 10px 28px rgba(0,0,0,.28)!important}
html[data-theme="dark"] .so-v2 #searchDescriptionHelp,html[data-theme="dark"] .so-v2 .search-submit-hint{color:#adbbb1!important}
html[data-theme="dark"] .so-v2 #imageSearch,html[data-theme="dark"] .so-v2 #manualSearchDetails{border-color:rgba(226,240,229,.25)!important;background:#0b1d14!important}
html[data-theme="dark"] .so-v2 #imageSearch>summary,html[data-theme="dark"] .so-v2 #manualSearchDetails>summary{color:#edf5ef!important}
html[data-theme="dark"] .so-v2 #manualSearchDetails>summary span{color:#aebbb2!important}

@media(max-width:650px){
  .so-v2 .watchbox{padding-top:20px!important}
  .so-v2 .watchinner{padding:22px 18px!important;border-radius:22px!important}
  .so-v2 #searchCapability{margin:8px 0 16px!important;line-height:1.45!important}
  .so-v2 #searchDescription{min-height:132px!important;padding:16px!important;font-size:16px!important;line-height:1.45!important}
  .so-v2 #searchDescriptionHelp{font-size:12px!important}
  .so-v2 #imageSearch>summary,.so-v2 #manualSearchDetails>summary{min-height:50px!important;padding:0 14px!important;font-size:13px!important}
}

/* Reuse the complete, proven Spotter form in a focused modal. */
.so-create-dialog{width:min(820px,calc(100vw - 32px));max-width:none;max-height:min(900px,calc(100svh - 32px));padding:0;border:1px solid rgba(13,56,39,.16);border-radius:28px;background:#f8faf6;color:var(--so-ink);box-shadow:0 36px 120px rgba(6,29,19,.34);overflow:hidden;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .18s ease,transform .18s ease}
.so-create-dialog[open].is-ready{opacity:1;transform:none}
.so-create-dialog::backdrop{background:rgba(5,24,16,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.so-create-dialog-shell{display:flex;flex-direction:column;max-height:min(900px,calc(100svh - 32px))}
.so-create-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 26px 18px;border-bottom:1px solid var(--so-line);background:rgba(255,255,255,.74)}
.so-create-dialog-kicker{margin-bottom:5px;color:var(--so-emerald);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.so-create-dialog-header h2{margin:0;color:var(--so-deep);font-size:27px;line-height:1.05;letter-spacing:-.045em}
.so-create-dialog-header p{margin:8px 0 0;color:var(--so-muted);font-size:13px;line-height:1.45}
.so-create-dialog-close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid var(--so-line);border-radius:13px;background:#fff;color:var(--so-muted);font:inherit;font-size:25px;line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.so-create-dialog-close:hover{background:var(--soft);color:var(--so-deep);transform:translateY(-1px)}
.so-create-dialog-close:focus-visible{outline:3px solid #1b7752;outline-offset:2px}
.so-create-dialog-content{padding:18px;overflow:auto;overscroll-behavior:contain}
.so-create-dialog .watchbox{width:100%!important;margin:0!important;padding:0!important}
.so-create-dialog .watchinner{border:0!important;border-radius:20px!important;box-shadow:none!important}
.so-create-dialog .watchhead{display:none!important}
.so-create-dialog #createForm{padding:4px!important}

html[data-theme="dark"] .so-create-dialog{border-color:rgba(226,240,229,.15);background:#0c1d13;color:#edf5ef;box-shadow:0 36px 120px rgba(0,0,0,.58)}
html[data-theme="dark"] .so-create-dialog-header{border-color:rgba(226,240,229,.10);background:#10251a}
html[data-theme="dark"] .so-create-dialog-header h2{color:#f1f6f2}
html[data-theme="dark"] .so-create-dialog-close{border-color:rgba(226,240,229,.14);background:#142b1d;color:#b5c1b8}
html[data-theme="dark"] .so-create-dialog-close:hover{background:#1a3525;color:#fff}
html[data-theme="dark"] .so-create-dialog-close:focus-visible{outline-color:#b8e571}

@media(max-width:650px){
  .so-create-dialog{width:calc(100vw - 18px);max-height:calc(100svh - 18px);border-radius:22px}
  .so-create-dialog-shell{max-height:calc(100svh - 18px)}
  .so-create-dialog-header{padding:19px 18px 15px;gap:12px}
  .so-create-dialog-header h2{font-size:24px}
  .so-create-dialog-header p{font-size:12px}
  .so-create-dialog-close{width:40px;height:40px;flex-basis:40px}
  .so-create-dialog-content{padding:10px}
  .so-create-dialog .watchinner{padding:14px 10px!important;border-radius:17px!important}
}

@media(prefers-reduced-motion:reduce){.so-create-dialog{transition:none!important;transform:none!important}}