/* startups theme: styles scoped to .theme-panel[data-theme="startups"]
   Venture capital / markets cover: deep navy-black, a precise grid, a hockey-stick candlestick chart in
   its own right-hand column, a slowly drawing equity curve in green and lime, a ticker tape along the
   bottom edge. Type reads like a term sheet or a financial paper: a mixed-case, semi-expanded masthead
   over a tick ruler, ledger-style question numbers, up-ticks and ruler marks for the small labels. */

.theme-panel[data-theme="startups"]{
  --tp-bg:
    radial-gradient(90% 70% at 100% 0%, rgba(26,120,96,.20) 0%, rgba(26,120,96,0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(20,44,78,.35) 0%, rgba(20,44,78,0) 70%),
    linear-gradient(165deg, #08101A 0%, #060B13 50%, #04070C 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos: 72% 50%;
  /* dark navy wash, heaviest behind the text column on the left, lighter where the chart lives */
  --tp-overlay:
    linear-gradient(90deg, rgba(4,8,14,.95) 0%, rgba(4,8,14,.90) 42%, rgba(4,8,14,.70) 72%, rgba(4,8,14,.52) 100%),
    linear-gradient(180deg, rgba(4,8,14,.25) 0%, rgba(4,8,14,.10) 40%, rgba(4,8,14,.75) 100%);
  --tp-accent: #2BE39B;
  --tp-accent-2: #C8F25A;
  --tp-text: #EAF2EF;
  --tp-text-2: #A3B6B0;
  --tp-line: rgba(160,230,200,.15);
  --tp-card: rgba(5,11,18,.80);
  --tp-card-border: rgba(140,235,190,.18);
  --tp-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tp-font-body: "Geist", -apple-system, system-ui, "Apple SD Gothic Neo", sans-serif;
  --tp-font-label: "Geist Mono", ui-monospace, Menlo, monospace;
  /* mixed-case, semi-expanded, light-ish masthead: a term sheet, not a terminal */
  --tp-h3-size: clamp(36px, 4.2vw, 56px);
  --tp-h3-weight: 500;
  --tp-h3-stretch: 112%;
  --tp-h3-style: normal;
  --tp-h3-transform: none;
  --tp-h3-tracking: -.03em;
  --tp-radius:20px;
  --tp-decor-opacity: 1;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(200,255,228,.07);
}

/* decor: pin the chart to the right edge, reveal it left-to-right on every tab switch */
.theme-panel[data-theme="startups"] .tp-decor{object-position:100% 50%}
.theme-panel[data-theme="startups"].is-entering .tp-art{animation:startups-wipe 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes startups-wipe{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:var(--tp-decor-opacity)}}

/* term-sheet corner registration marks, above the decor and below the copy */
.theme-panel[data-theme="startups"]::after{
  content:"";position:absolute;inset:14px;z-index:-1;pointer-events:none;
  --m: rgba(200,242,90,.45);
  background:
    linear-gradient(var(--m),var(--m)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/1px 12px no-repeat;
}

.theme-panel[data-theme="startups"] .tp-body{padding-bottom:calc(clamp(26px,4vw,48px) + 22px)}

/* panel number: an up-tick, like the arrows in the ticker strip, then a hairline */
.theme-panel[data-theme="startups"] .panel-n{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;
}
.theme-panel[data-theme="startups"] .panel-n::before{
  content:"";flex:none;width:8px;height:7px;margin-top:-1px;background:var(--tp-accent);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  animation:startups-uptick 6s ease-in-out infinite;
}
.theme-panel[data-theme="startups"] .panel-n::after{
  content:"";flex:0 0 72px;height:1px;background:linear-gradient(90deg,rgba(200,242,90,.6),rgba(200,242,90,0));
}
@keyframes startups-uptick{0%,78%,100%{transform:none;opacity:1}86%{transform:translateY(-2px);opacity:.55}}

/* masthead: mixed case, semi-expanded, with a ruler of ticks underneath */
.theme-panel[data-theme="startups"] h3{
  max-width:8.2em;line-height:1.02;margin-bottom:30px;padding-bottom:22px;position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#E4F6EE 55%,#A9D9C3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.theme-panel[data-theme="startups"] h3::after{
  content:"";position:absolute;left:0;bottom:0;width:min(220px,60%);height:7px;
  background:
    linear-gradient(90deg,var(--tp-accent-2),rgba(200,242,90,.15)) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(200,242,90,.55) 0 1px,transparent 1px 10px) 0 100%/100% 4px no-repeat,
    repeating-linear-gradient(90deg,rgba(200,242,90,.75) 0 1px,transparent 1px 50px) 0 100%/100% 7px no-repeat;
}

/* section labels: a ruler mark (a short lime rule with an end tick) */
.theme-panel[data-theme="startups"] h4{display:flex;align-items:center;gap:10px;letter-spacing:.16em}
.theme-panel[data-theme="startups"] h4::before{
  content:"";flex:none;width:14px;height:5px;margin-top:-3px;
  background:
    linear-gradient(var(--tp-accent-2),var(--tp-accent-2)) 0 100%/14px 1px no-repeat,
    linear-gradient(var(--tp-accent-2),var(--tp-accent-2)) 100% 100%/1px 5px no-repeat;
}

/* questions: a column that stops short of the chart; ledger-style numbers, a lime tick on each rule */
.theme-panel[data-theme="startups"] .questions{max-width:min(560px, calc(100% - 210px))}
.theme-panel[data-theme="startups"] .questions li{line-height:1.6;padding-left:54px}
.theme-panel[data-theme="startups"] .questions li::after{
  content:"";position:absolute;left:0;top:-1px;width:28px;height:1px;background:var(--tp-accent-2);
}
.theme-panel[data-theme="startups"] .questions li::before{
  top:22px;font-size:11.5px;font-weight:500;letter-spacing:.08em;line-height:1;
  padding:0 1px 5px;border-bottom:1px solid rgba(200,242,90,.5);
}

/* who's in the room: hairline panels with a tiny sparkline */
.theme-panel[data-theme="startups"] .board{gap:8px}
.theme-panel[data-theme="startups"] .board li{
  position:relative;border-radius:4px;padding:14px 16px 16px;
  box-shadow:inset 0 1px 0 rgba(200,255,228,.05),0 10px 30px rgba(0,0,0,.25);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M1 11 L7 9 L12 10 L18 6 L23 8 L29 5 L34 6 L40 2 L47 3' fill='none' stroke='%232BE39B' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px top 15px;background-size:48px 14px;
}
.theme-panel[data-theme="startups"] .board li:nth-child(even){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M1 9 L6 10 L12 6 L17 8 L23 7 L28 9 L34 4 L40 5 L47 2' fill='none' stroke='%23C8F25A' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E");
}
.theme-panel[data-theme="startups"] .board li::before{
  content:"";position:absolute;left:-1px;top:-1px;width:26px;height:2px;background:var(--tp-accent);
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.theme-panel[data-theme="startups"] .board li:hover::before{width:calc(100% + 2px)}
.theme-panel[data-theme="startups"] .tag{letter-spacing:.14em;margin-bottom:8px}

.theme-panel[data-theme="startups"] .mentor-note{font-size:13.5px}

/* wider screens: a 2 x 2 block of cards under the questions, below the chart column */
@media (min-width:721px){
  .theme-panel[data-theme="startups"] .board{grid-template-columns:repeat(2,minmax(0,1fr));max-width:min(600px, calc(100% - 150px))}
}

/* phone: the chart sits behind the copy, so quieten it behind the heading and questions and along the left edge */
@media (max-width:720px){
  .theme-panel[data-theme="startups"]{
    --tp-overlay: linear-gradient(180deg, rgba(4,8,14,.82) 0%, rgba(4,8,14,.9) 100%);
    --tp-h3-size: clamp(30px, 9.4vw, 40px);
  }
  .theme-panel[data-theme="startups"] .tp-art{
    -webkit-mask-image:
      linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.6) 92%,#000 97%),
      linear-gradient(90deg,transparent 0,#000 18%);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.6) 92%,#000 97%),
      linear-gradient(90deg,transparent 0,#000 18%);
            mask-composite:intersect;
  }
  .theme-panel[data-theme="startups"] .questions{max-width:none}
  .theme-panel[data-theme="startups"] .questions li{padding-left:48px}
  .theme-panel[data-theme="startups"]::after{inset:10px}
}

@media (prefers-reduced-motion: reduce){
  .theme-panel[data-theme="startups"] .panel-n::before{animation:none}
}

/* photo slot: uncomment once assets/themes/startups.jpg exists (url resolves relative to this file in every browser) */
/* .theme-panel[data-theme="startups"]::before{background-image:var(--tp-overlay),url("startups.jpg")} */