/* Beach palette, sampled from the family's drawn scenes
   (ade-product-family/.claude/skills/marketing-manager/scripts/brand_anim_welcome.py). */
:root {
  --sky: rgb(228,240,248); --sky-low: rgb(246,232,214); --sea: rgb(40,156,212);
  --sand: rgb(247,219,146); --sun: rgb(234,128,20); --ink: rgb(51,65,85);
  --cyan: rgb(14,165,233); --cyan-d: rgb(3,105,161); --grey: rgb(148,163,184);
  --faint: rgb(203,213,225); --pink: rgb(244,114,182); --amber: rgb(245,158,11);
  --ok: rgb(16,185,129); --white: #fff;
}
* { box-sizing: border-box; }
html { background: var(--sky); }
body { margin: 0; color: var(--ink); font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
       background: linear-gradient(var(--sky) 0, var(--sky-low) 520px, var(--sky) 900px); }
a { color: var(--cyan-d); }
main { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

.top { max-width: 68rem; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center;
       justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.5rem; text-decoration: none; color: var(--ink); }
.brand span { font-weight: 400; font-size: .95rem; color: var(--grey); margin-left: .4rem; }
nav a { margin-left: 1.1rem; text-decoration: none; color: var(--ink); font-weight: 600; }
nav a.on { color: var(--cyan-d); border-bottom: 3px solid var(--cyan); }

.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 1.5rem 0 .6rem; }
.hero .lead { font-size: 1.15rem; max-width: 46rem; }
.hero img { width: 100%; height: auto; display: block; margin: 1.5rem 0 0; border-radius: 14px; }

h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.card { background: var(--white); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex;
        flex-direction: column; gap: .5rem; box-shadow: 0 1px 0 var(--faint); border-top: 6px solid var(--sand); }
.card h3 { margin: 0; font-size: 1.2rem; }
.card .verb { color: var(--grey); font-weight: 400; margin-left: .35rem; }
.card p { margin: 0; }
.card .note { color: var(--grey); font-size: .9rem; }
.card .links { margin-top: auto; display: flex; gap: .9rem; flex-wrap: wrap; font-weight: 600; font-size: .95rem; }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
         letter-spacing: .04em; padding: .1rem .5rem; border-radius: 99px; color: var(--white); vertical-align: middle; }
.b-live { background: var(--sun); } .b-lab { background: var(--amber); }
.b-experimental { background: var(--pink); } .b-planned { background: var(--grey); }
.card.s-planned, .card.s-experimental { border-top-color: var(--faint); }

.updates { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.updates li { background: var(--white); border-radius: 12px; padding: .9rem 1.1rem; border-left: 5px solid var(--sea); }
.updates li.k-decision { border-left-color: var(--amber); }
.updates .when { color: var(--grey); font-size: .85rem; }
.updates .kind { font-size: .75rem; font-weight: 700; text-transform: uppercase; margin-left: .5rem; color: var(--sea); }
.updates .k-decision .kind { color: var(--amber); }
.updates .lang { font-size: .7rem; font-weight: 700; border: 1px solid var(--grey); color: var(--grey);
                 border-radius: 4px; padding: 0 .3rem; margin-left: .4rem; }
.updates h3 { margin: .2rem 0; font-size: 1.05rem; }
.updates p { margin: 0; }
.empty { background: var(--white); border-radius: 12px; padding: 1rem 1.2rem; color: var(--grey); }
.more { margin-top: 1rem; font-weight: 600; }

.prose { background: var(--white); border-radius: 14px; padding: .5rem 1.6rem 1.4rem; max-width: 48rem; }
.prose h2 { font-size: 1.2rem; margin: 1.4rem 0 .4rem; }

footer { border-top: 6px solid var(--sand); background: var(--sand); padding: 1.2rem; text-align: center; font-size: .9rem; }
footer p { margin: 0; }

/* Ask the agent */
#ask-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; border: 0; border-radius: 99px;
           background: var(--cyan-d); color: var(--white); font: inherit; font-weight: 600;
           padding: .75rem 1.1rem; box-shadow: 0 6px 18px rgba(3,105,161,.35); cursor: pointer; }
#ask-fab:hover { background: var(--cyan); }
#ask-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: 100%; max-width: 28rem;
             background: var(--white); display: flex; flex-direction: column; transform: translateX(100%);
             transition: transform .2s ease-in-out; box-shadow: -8px 0 30px rgba(51,65,85,.2); }
#ask-panel.open { transform: none; }
#ask-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(51,65,85,.2); }
#ask-header { display: flex; justify-content: space-between; align-items: flex-start; padding: .8rem 1rem;
              border-bottom: 1px solid var(--faint); }
#ask-header h2 { font-size: 1rem; margin: 0; }
#ask-header p { margin: 0; font-size: .8rem; color: var(--grey); }
.ask-btn { border: 0; background: none; font-size: 1.2rem; color: var(--grey); cursor: pointer; }
#ask-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; font-size: .95rem; }
.ask-q { align-self: flex-end; background: var(--cyan-d); color: var(--white); border-radius: 14px 14px 4px 14px;
         padding: .5rem .8rem; max-width: 90%; white-space: pre-wrap; }
.ask-a { align-self: flex-start; background: var(--sky); border-radius: 14px 14px 14px 4px; padding: .5rem .85rem; max-width: 95%; }
.ask-a p { margin: .3rem 0; } .ask-a ul, .ask-a ol { margin: .3rem 0; padding-left: 1.2rem; }
.ask-a .h { font-weight: 700; }
.ask-note { background: var(--sky-low); }
.ask-meta { font-size: .72rem; color: var(--grey); margin-top: .3rem; }
.ask-chip { display: block; border: 0; background: none; color: var(--cyan-d); text-align: left; padding: .2rem 0;
            font: inherit; cursor: pointer; } .ask-chip:hover { text-decoration: underline; }
#ask-thinking { padding: 0 1rem .3rem; font-size: .8rem; color: var(--grey); display: none; }
#ask-thinking.on { display: block; }
#ask-form { display: flex; gap: .5rem; align-items: flex-end; border-top: 1px solid var(--faint); padding: .75rem; }
#ask-form textarea { flex: 1; resize: none; max-height: 10rem; font: inherit; border: 1px solid var(--faint);
                     border-radius: 10px; padding: .5rem .7rem; }
#ask-form button { border: 0; border-radius: 10px; background: var(--cyan-d); color: var(--white); font: inherit;
                   font-weight: 600; padding: .5rem .9rem; cursor: pointer; }
@media (max-width: 600px) { .brand span { display: none; } nav a { margin-left: .7rem; } }
.ask-q.queued { opacity: .65; }
.ask-tag { margin-left: .5rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ask-x { margin-left: .4rem; border: 0; background: none; color: inherit; font-size: 1rem; cursor: pointer; padding: 0 .2rem; }
.ask-again { display: block; margin-top: .3rem; border: 1px solid rgba(255,255,255,.7); background: none; color: inherit;
             border-radius: 99px; font: inherit; font-size: .8rem; padding: .1rem .6rem; cursor: pointer; }

/* Signed-in pages and the sign-in form (served by api/private.py, never from public/) */
.gate { background: var(--white); border-radius: 14px; padding: 1.2rem 1.6rem 1.4rem; max-width: 32rem; }
.gate form { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; }
.gate input { flex: 1; min-width: 12rem; font: inherit; padding: .5rem .7rem; border: 1px solid var(--faint); border-radius: 10px; }
.gate button, .who button { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: .5rem 1rem;
       background: var(--cyan-d); color: var(--white); cursor: pointer; }
.gate .msg { background: var(--sky-low); border-radius: 10px; padding: .5rem .8rem; }
.gate .fine { color: var(--grey); font-size: .85rem; }
.who { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; font-size: .9rem; color: var(--grey); }
.who form { margin: 0; } .who button { padding: .25rem .7rem; background: var(--grey); }
.player video { width: 100%; max-width: 48rem; border-radius: 14px; background: var(--ink); display: block; }

/* Use cases: the video pill library (build.py render_use_cases) */
.uc-search { position: sticky; top: 0; z-index: 5; background: var(--sky); padding: .8rem 0; margin-bottom: 1rem; }
.uc-search input { width: 100%; font: inherit; padding: .6rem .9rem; border: 1px solid var(--faint); border-radius: 12px; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.chip { font: inherit; font-size: .8rem; font-weight: 600; border: 1px solid var(--faint); border-radius: 99px;
        padding: .15rem .65rem; background: var(--white); color: var(--ink); }
.chip.tag { cursor: pointer; } .chip.tag.on { background: var(--cyan-d); color: var(--white); border-color: var(--cyan-d); }
.chip.member { border-color: var(--sea); color: var(--cyan-d); }
.pill { display: grid; grid-template-columns: 45% 1fr; gap: 1.2rem; background: var(--white); border-radius: 14px;
        padding: 1rem; margin-bottom: 1rem; }
.pill-media { position: relative; }
.pill-media video { width: 100%; border-radius: 10px; background: var(--ink); display: block; }
.pill-media .dur { position: absolute; left: .5rem; top: .5rem; background: rgba(51,65,85,.8); color: var(--white);
        font-size: .75rem; border-radius: 6px; padding: .05rem .4rem; }
.pill-body h3 { margin: 0 0 .4rem; font-size: 1.2rem; } .pill-body h1 { margin: 0 0 .5rem; font-size: 1.8rem; }
.pill-body p { margin: .4rem 0; }
.pill .pillar { color: var(--grey); font-size: .9rem; }
.pill .draft { background: var(--pink); color: var(--white); font-weight: 700; border-radius: 8px; padding: .2rem .6rem; display: inline-block; }
.pill details { margin-top: .6rem; } .pill summary { cursor: pointer; font-weight: 600; }
.transcript { list-style: none; padding: 0; margin: .4rem 0; font-size: .9rem; }
.transcript .when { color: var(--grey); font-variant-numeric: tabular-nums; margin-right: .4rem; }
.b-lab { background: var(--amber); }
#uc-ask { font: inherit; border: 0; background: none; color: var(--cyan-d); font-weight: 600; cursor: pointer; }
@media (max-width: 768px) { .pill { grid-template-columns: 1fr; } .uc-search .chips { flex-wrap: nowrap; overflow-x: auto; } }
.pill .clamp p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: .4rem 0; }

/* Home: "See it working", the door to the use cases */
.uc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.uc-card { background: var(--white); border-radius: 14px; padding: .7rem; display: flex; flex-direction: column;
           gap: .5rem; text-decoration: none; color: var(--ink); }
.uc-card:hover { outline: 3px solid var(--cyan); }
.uc-cover { position: relative; display: block; }
.uc-cover img { width: 100%; height: auto; display: block; border-radius: 10px; }
.uc-cover .dur { position: absolute; left: .5rem; top: .5rem; background: rgba(51,65,85,.85); color: var(--white);
                 font-size: .8rem; font-weight: 700; border-radius: 6px; padding: .1rem .5rem; }
.uc-q { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
#ask-fine { margin: 0; padding: 0 .75rem .6rem; font-size: .72rem; color: var(--grey); }
.pill-media a.play { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.pill-media a.play img { width: 100%; height: auto; display: block; }
.pill-media .play-icon { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(3,105,161,.88); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; padding-left: .2rem; }
.pill-media a.play:hover .play-icon { background: var(--cyan); }

/* Home: the family introduction video, right under the hero */
.featured { display: grid; grid-template-columns: 55% 1fr; gap: 1.4rem; align-items: center; background: var(--white);
            border-radius: 14px; padding: 1rem; margin-top: 1.5rem; }
.featured h2 { margin: 0 0 .5rem; }
@media (max-width: 768px) { .featured { grid-template-columns: 1fr; } }