/* Crawler pages for /showcase.
   The homepage and the Living Pane already own this card (app.css, "sites of the day"
   and "de showcase-view"). This file repeats those rules so a server-rendered page,
   which does not load app.css, uses the same tokens and the same class names:
   .mkt-pane, .mkt-chrome, .mkt-shot, .mkt-sotd-bar, .sc-head, .sc-grid, .sc-tabs.
*/

:root{
  --font-sans:"Geist","Geist Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:var(--font-sans);
  --font-display:var(--font-sans);
  --white:#FFFFFF;
  --green-base:#0FB970;
  --green-strong:#0A9D5E;
  --green-text:#0A7A4B;
  --paper-bg:#FAFAF8;
  --paper-sunken:#F1EFE9;
  --paper-surface2:#FAF8F3;
  --paper-border-subtle:#EAE7E0;
  --paper-border:#DEDBD2;
  --paper-border-strong:#CDC9BE;
  --paper-pane-border:#E4E1D9;
  --ink-1:#1A1714;
  --ink-2:#56524B;
  --ink-3:#716C61;
  --charcoal-bg:#0B0B0C;
  --bg:var(--paper-bg);
  --bg-sunken:var(--paper-sunken);
  --surface:var(--white);
  --surface-2:var(--paper-surface2);
  --border-subtle:var(--paper-border-subtle);
  --border:var(--paper-border);
  --border-strong:var(--paper-border-strong);
  --fg:var(--ink-1);
  --fg-secondary:var(--ink-2);
  --fg-muted:var(--ink-3);
  --ink:var(--ink-1);
  --ink-hover:#000000;
  --ink-contrast:var(--white);
  --accent:var(--green-base);
  --accent-text:var(--green-text);
  --accent-ring:var(--green-strong);
  --brandbar-h:56px;
  --control-h:44px;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-full:9999px;
  --e1:0 1px 2px rgba(24,20,15,.05),0 1px 1px rgba(24,20,15,.04);
  --e3:0 2px 4px rgba(24,20,15,.04),0 12px 28px -8px rgba(24,20,15,.10),0 28px 52px -18px rgba(24,20,15,.12);
  --dur-micro:120ms;
  --dur-std:200ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-ring);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-weight:400; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
a{color:inherit;}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs);}

.brandbar{
  height:var(--brandbar-h); display:flex; align-items:center;
  padding:0 clamp(16px,4vw,32px);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; min-height:var(--control-h);}
.brand-mark{width:26px; height:26px; display:block; color:var(--fg);}
.brand-name{font-weight:600; letter-spacing:-.02em; font-size:15px;}
.brand-name .slash{color:var(--accent);}
.brand:hover .brand-name{color:var(--ink-hover);}

.sc-frame{width:min(1100px, calc(100% - 40px)); margin:0 auto; padding:clamp(28px,5vh,56px) 0 64px;}

.mkt-pane{background:var(--surface); border:1px solid var(--paper-pane-border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--e3);}
.mkt-chrome{height:38px; background:var(--surface-2); border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:8px; padding:0 14px;}
.mkt-dots{display:inline-flex; gap:5px; flex:none;}
.mkt-dots i{width:8px; height:8px; border-radius:var(--radius-full); background:var(--border-strong); display:block;}
.mkt-addr{margin:0 auto; background:var(--bg); border:1px solid var(--border-subtle);
  border-radius:var(--radius-full); height:24px; display:inline-flex; align-items:center; gap:6px;
  padding:0 12px; font-size:12.5px; color:var(--fg); font-variant-numeric:tabular-nums;
  max-width:min(420px, 58%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mkt-lock{width:11px; height:11px; flex:none; display:inline-block;}
.mkt-datestamp{font-size:12px; color:var(--fg-muted); flex:none; font-variant-numeric:tabular-nums; text-decoration:none;}
.mkt-datestamp:hover{color:var(--fg);}
.mkt-shot{display:block; background:var(--charcoal-bg); line-height:0;}
.mkt-shot img{width:100%; height:auto; display:block; aspect-ratio:1440/666; object-fit:cover; object-position:center;}
.mkt-sotd-bar{display:flex; align-items:center; gap:14px; padding:14px 18px; flex-wrap:nowrap;
  background:var(--surface); border-top:1px solid var(--border-subtle);}
.mkt-why{font-size:14.5px; color:var(--fg-secondary); flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mkt-grow{flex:1;}
.mkt-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--control-h);
  padding:0 18px; border-radius:var(--radius-sm); background:var(--ink); color:var(--ink-contrast);
  font-size:15px; font-weight:500; text-decoration:none; border:0; cursor:pointer; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--e1);
  transition:background var(--dur-micro) var(--ease-out);}
.mkt-btn:hover{background:var(--ink-hover);}
.sc-card .mkt-sotd-bar{padding:12px 16px;}
.sc-card{margin:0;}

.sc-head{padding:6px 4px 0;}
.sc-h1{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,34px); letter-spacing:-.022em;
  line-height:1.1; color:var(--fg); margin:0;}
.sc-h1 em{font-style:normal; color:inherit;
  background-image:linear-gradient(178deg, rgba(15,185,112,.30), rgba(53,232,160,.34));
  background-repeat:no-repeat; background-size:100% 40%; background-position:0 82%;
  padding:0 .06em; margin:0 -.06em; border-radius:3px;}
.sc-sub{font-size:14.5px; color:var(--fg-secondary); margin:8px 0 0; max-width:62ch;}
.sc-tabs{display:flex; gap:20px; margin:22px 0 20px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.sc-tab{appearance:none; background:none; border:0; padding:0 2px 12px; font-size:14px;
  color:var(--fg-muted); cursor:pointer; position:relative; min-height:var(--control-h);}
.sc-tab.is-on{color:var(--fg);}
.sc-tab.is-on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink);}
.sc-tab .sc-soon{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); margin-left:5px;}
.sc-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 18px;}
.sc-grid.sc-grid--one{grid-template-columns:1fr; max-width:820px;}
.sc-note{font-size:13.5px; color:var(--fg-muted); margin:4px 0 2px;}
.sc-note a{color:var(--accent-text); text-decoration:none;}
.sc-note a:hover{text-decoration:underline;}

.sc-badge{margin-top:28px; max-width:820px;}
.sc-badge h2{font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:22px; line-height:1.2; margin:0 0 8px;}
.sc-badge-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:16px 0;}
.sc-swatch{background:var(--charcoal-bg); border-radius:var(--radius-lg); padding:16px 18px; display:inline-flex;}
.sc-badge pre{margin:0 0 14px; padding:12px 14px; background:var(--surface); border:1px solid var(--paper-pane-border);
  border-radius:var(--radius-md); font-family:var(--font-sans); font-size:13px; line-height:1.45;
  white-space:pre-wrap; word-break:break-word; color:var(--fg-secondary);}
.sc-kicker{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 8px;}

@media (max-width:860px){
  .sc-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .mkt-sotd-bar{flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px;}
  .mkt-why{text-align:center;}
  .mkt-sotd-bar .mkt-btn{width:100%;}
  .sc-frame{width:min(100% - 32px, 1100px);}
}