/* ============================================================
   design.css — visuals for the Design engine platform page.
   Reuses the shared atoms from idea.css (i-block/.slab, .i-head,
   .screen/.screen-stage/.screen-chrome, .disc-row/.disc-copy,
   .mini-idea, the cursive eyebrow, the rounded-card rhythm) and
   platform.css (nav, eng-hero, eng-move, dark pl-foot CTA).
   Adds the design-only pieces below. The app-screen mocks keep the
   app's Manrope/Inter Tight chrome so they read as real product.
   The "brand look" in the rendered visuals is BladeStack:
   dark steel + signal orange, a serif display, so it reads as a
   different house style from the cream marketing page.
   ============================================================ */

:root {
  --rw: #d22222;       /* BladeStack accent (signal red-orange) */
  --rw-2: #cfd3d9;     /* cool light / alloy */
  --rw-bg: #1a1c20;    /* dark steel */
  --rw-ink: #eef1f5;   /* on-dark text */
}

/* wider hero lead + serif promise (mirrors idea.css) */
.eng-hero .lead.lead--wide { max-width: 62ch; }
.eng-hero .promise {
  margin: 30px auto 0; max-width: 720px;
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.3; color: var(--accent-ink);
}

/* ============================================================
   RENDERED VISUAL — a CSS-composed "finished image" in the
   brand's look (like the app's live preview render).
   ============================================================ */
.render { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 30px 60px -34px rgba(20,10,4,.5); font-family: 'Instrument Serif', 'EB Garamond', Georgia, serif; }
.render--sq { aspect-ratio: 1/1; }
.render-mark { position: absolute; top: 14px; left: 16px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rw-ink); opacity: .85; z-index: 2; }
.render-mark b { color: var(--rw); }
.render-badge { position: absolute; top: 13px; right: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 10px; color: var(--rw-ink); background: rgba(255,255,255,.14); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 999px; z-index: 2; }
.render-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rw); }

/* statement look: big words on a flat brand field */
.render--statement { background: radial-gradient(120% 90% at 78% 12%, rgba(255,116,41,.5), rgba(255,116,41,0) 55%), linear-gradient(160deg, #22262d, var(--rw-bg)); display: flex; flex-direction: column; justify-content: center; padding: 34px 30px; }
.render--statement .r-head { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.08; color: var(--rw-ink); font-weight: 500; letter-spacing: -0.01em; }
.render--statement .r-sub { font-family: 'Manrope', sans-serif; font-size: 12.5px; color: rgba(241,241,245,.7); margin-top: 14px; }

/* poster look: cut-out subject + type on a warm field */
.render--poster { background: linear-gradient(155deg, #ff7429 0%, var(--rw) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.render--poster .r-cup { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: 46%; height: 46%; }
.render--poster .r-head { position: relative; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.05; color: #fff; font-weight: 500; z-index: 2; }
.render--poster .r-sub { position: relative; font-family: 'Manrope', sans-serif; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 8px; z-index: 2; }

/* infographic look: light field, crisp callouts */
.render--info { background: #f1f3f6; padding: 26px 24px; display: flex; flex-direction: column; }
.render--info .r-mark { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rw); }
.render--info .r-head { font-size: 1.6rem; line-height: 1.1; color: #1a1c20; margin: 6px 0 16px; font-weight: 500; }
.render--info .r-stats { display: grid; gap: 10px; font-family: 'Manrope', sans-serif; }
.render--info .r-stat { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: baseline; }
.render--info .r-num { font-family: 'Instrument Serif', serif; font-size: 1.7rem; color: var(--rw); line-height: 1; }
.render--info .r-lab { font-size: 12px; color: #4a505a; line-height: 1.35; }

/* photo look: warm photographic gradient + overlay marks */
.render--photo { background: linear-gradient(155deg, #3b3f47 0%, #1a1c20 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.render--photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 30% 30%, rgba(255,138,74,.28), transparent 60%); }
.render--photo .r-plate { position: relative; z-index: 2; background: rgba(20,12,7,.5); backdrop-filter: blur(3px); border-left: 3px solid var(--rw); padding: 10px 14px; }
.render--photo .r-head { font-size: 1.4rem; color: var(--rw-ink); line-height: 1.1; font-weight: 500; }
.render--photo .r-sub { font-family: 'Manrope', sans-serif; font-size: 11.5px; color: rgba(241,241,245,.72); margin-top: 5px; }

/* a gallery of finished renders */
.render-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 860px; margin: 0 auto; }
@media (max-width: 720px) { .render-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .render-gallery { grid-template-columns: 1fr; } }
.render-cap { text-align: center; margin-top: 10px; font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================
   THE SEVEN LOOKS — the real app tile picker
   ============================================================ */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .looks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .looks { grid-template-columns: repeat(2, 1fr); } }
.look-tile { border: 1px solid #e7e7ec; border-radius: 12px; background: #fff; padding: 12px 12px 14px; text-align: left; }
.look-tile.is-on { border-color: var(--rw); box-shadow: 0 0 0 1px var(--rw), 0 12px 26px -16px rgba(255,116,41,.5); }
.look-visual { border-radius: 8px; overflow: hidden; margin-bottom: 10px; display: block; }
.look-visual svg { display: block; width: 100%; height: auto; }
.look-name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; color: #131316; }
.look-tile.is-on .look-name { color: var(--rw); }
.look-blurb { font-family: 'Manrope', sans-serif; font-size: 11.5px; color: #6e7080; line-height: 1.35; margin-top: 2px; }

/* ============================================================
   BRAND RECORD — one identity themes everything
   ============================================================ */
.brandrec { display: grid; gap: 14px; }
.brandrec-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.brandrec-lab { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #9a9ba3; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #eeeef0; border-radius: 8px; padding: 6px 11px 6px 7px; font-family: 'Manrope', sans-serif; font-size: 12px; color: #42434d; }
.swatch i { width: 18px; height: 18px; border-radius: 5px; }
.fontchip { font-size: 15px; color: #131316; }
.fontchip .fc-serif { font-family: 'Instrument Serif', serif; font-size: 20px; }
.fontchip .fc-sans { font-family: 'Manrope', sans-serif; font-weight: 600; }
.fontchip small { font-family: 'Inter Tight', sans-serif; font-size: 10px; color: #9a9ba3; letter-spacing: .04em; text-transform: uppercase; margin-left: 8px; }
.refthumbs { display: flex; gap: 8px; }
.refthumb { width: 46px; height: 46px; border-radius: 8px; border: 1px solid #eeeef0; }

/* theme cards (the app's saved brand styles) */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 620px) { .themes { grid-template-columns: 1fr 1fr; } }
.theme-card { border: 1px solid #e7e7ec; border-radius: 11px; background: #fff; padding: 8px 8px 11px; }
.theme-card.is-on { border-color: var(--rw); box-shadow: 0 0 0 1px var(--rw); }
.theme-thumb { height: 74px; border-radius: 7px; margin-bottom: 9px; }
.theme-name { display: flex; align-items: center; gap: 6px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 12.5px; color: #131316; padding: 0 3px; }
.theme-card.is-on .theme-name { color: var(--rw); }
.theme-name .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--rw); }
.theme-meta { font-family: 'Inter Tight', sans-serif; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #9a9ba3; padding: 3px 3px 0; }

/* re-theme demo: same idea, two brand looks */
.retheme { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; max-width: 720px; margin: 26px auto 0; }
@media (max-width: 640px) { .retheme { grid-template-columns: 1fr; } }
.retheme-arrow { display: grid; place-items: center; color: var(--accent-ink); }
.retheme-arrow svg { width: 26px; height: 26px; }
@media (max-width: 640px) { .retheme-arrow { transform: rotate(90deg); } }

/* ============================================================
   TWO ENGINES — it paints, or it builds from templates
   ============================================================ */
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 820px) { .engines { grid-template-columns: 1fr; } }
.engine-col { border: 1px solid var(--line-ink); border-radius: 20px; background: var(--paper); padding: 26px; }
.i-block.slab .engine-col { background: var(--bg); }
.engine-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.engine-col h3 em { font-style: italic; color: var(--accent-ink); }
.engine-col > p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.engine-demo { margin-top: 4px; }

/* ============================================================
   BRING YOUR OWN — attach a photo (recreate / reinterpret)
   ============================================================ */
.attach-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; max-width: 900px; margin: 0 auto; }
@media (max-width: 820px) { .attach-row { grid-template-columns: 1fr; gap: 16px; } }
.attach-src { border: 1.5px dashed var(--line-strong); border-radius: 13px; background: var(--paper); padding: 12px; text-align: center; }
.i-block.slab .attach-src { background: var(--bg); }
.attach-src .as-img { border-radius: 8px; height: 120px; }
.attach-src .as-lab { font-family: 'Inter Tight', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.attach-arrow { display: grid; place-items: center; text-align: center; color: var(--accent-ink); }
.attach-arrow svg { width: 22px; height: 22px; }
.attach-arrow .amode { display: block; font-family: 'Inter Tight', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
@media (max-width: 820px) { .attach-arrow { transform: rotate(90deg); } .attach-arrow .amode { transform: rotate(-90deg); } }
.attach-modes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.amode-pill { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; border: 1px solid var(--line-ink); border-radius: 999px; padding: 6px 13px; color: var(--ink); background: var(--paper); display: inline-flex; align-items: center; gap: 7px; }
.i-block.slab .amode-pill { background: var(--bg); }
.amode-pill.is-on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.amode-pill .exp { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================
   CAROUSEL — five slides, slide-1 anchors the rest
   ============================================================ */
.arc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 940px; margin: 0 auto; }
@media (max-width: 720px) { .arc { grid-template-columns: repeat(2, 1fr); } }
.arc-slide { border: 1px solid var(--line-ink); border-radius: 12px; background: var(--paper); overflow: hidden; }
.i-block.slab .arc-slide { background: var(--bg); }
.arc-num { font-family: 'Inter Tight', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rw); padding: 10px 12px 0; }
.arc-mini { margin: 8px 12px 12px; border-radius: 7px; aspect-ratio: 4/5; background: linear-gradient(160deg, #22262d, var(--rw-bg)); display: flex; align-items: flex-end; padding: 11px; }
.arc-mini .m { font-family: 'Instrument Serif', serif; font-size: 13px; color: var(--rw-ink); line-height: 1.1; }
.arc-mini.stat { background: #f1f3f6; }
.arc-mini.stat .m { font-family: 'Instrument Serif', serif; color: var(--rw); font-size: 26px; }
.arc-role { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; color: var(--ink); padding: 0 12px 12px; }
.arc-role small { display: block; font-weight: 500; color: var(--ink-faint); font-size: 10.5px; margin-top: 1px; }

.anchor-flow { max-width: 820px; margin: clamp(30px,4vw,48px) auto 0; border: 1px solid var(--line-ink); border-radius: 16px; background: var(--paper); padding: 24px 26px; }
.i-block.slab .anchor-flow { background: var(--bg); }
.anchor-flow h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin: 0 0 6px; }
.anchor-flow h3 em { font-style: italic; color: var(--accent-ink); }
.anchor-flow p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0 0 18px; max-width: 62ch; }
.anchor-diagram { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; }
@media (max-width: 620px) { .anchor-diagram { grid-template-columns: 1fr; } }
.anchor-one { border: 2px solid var(--rw); border-radius: 9px; aspect-ratio: 4/5; width: 78px; background: linear-gradient(160deg, #22262d, var(--rw-bg)); display: grid; place-items: center; position: relative; }
.anchor-one .tag { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-family: 'Inter Tight', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--rw); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.anchor-one svg { width: 22px; height: 22px; color: var(--rw-2); }
.anchor-fan { display: grid; place-items: center; color: var(--ink-faint); }
.anchor-fan svg { width: 26px; height: 26px; color: var(--accent-ink); }
.anchor-rest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.anchor-rest .s { border: 1px solid var(--line-ink); border-radius: 7px; aspect-ratio: 4/5; background: linear-gradient(160deg, #23262d, #141517); position: relative; }
.anchor-rest .s.stat { background: #eef1f5; }
.anchor-rest .s::after { content: 'inherits slide 1'; position: absolute; inset: 0; display: none; }

/* thread marker (reused idea for the winter-post continuity) */
.d-thread { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: 'Inter Tight', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rw); background: color-mix(in srgb, var(--rw) 10%, transparent); border-radius: 999px; padding: 5px 11px; }
.d-thread svg { width: 12px; height: 12px; }

/* Titles: gray setup + dark-ink emphasis (match home two-tone) */
.engine-col h3, .anchor-flow h3 { color: rgba(26, 26, 26, 0.4); }
.engine-col h3 em, .anchor-flow h3 em { color: var(--ink); }

/* ===== Hero: staggered gallery (dark stage) ===== */
.bento { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px,1.4vw,16px); margin: 0 auto clamp(26px,3.5vw,44px); }
.bento .render { width: clamp(140px,16vw,186px); flex: none; }
.bento .render:nth-child(1) { transform: translateY(28px); }
.bento .render:nth-child(3) { transform: translateY(36px); }
.bento .render:nth-child(4) { transform: translateY(10px); }
.hero-dark .bento .render { box-shadow: 0 0 0 1px rgba(255,255,235,.14), 0 26px 55px -22px rgba(0,0,0,.7); }
@media (max-width: 640px) { .bento .render:nth-child(n+3) { display:none; } .bento .render:nth-child(1){ transform:none; } }

/* ===== Hero: anatomy diagram (dark stage) ===== */
.eng-hero.hero-dark .anat { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom: clamp(30px,4vw,48px); }
.eng-hero.hero-dark .anat-side { display:flex; flex-direction:column; gap:30px; }
.eng-hero.hero-dark .anat-side.left { align-items:flex-end; text-align:right; }
.eng-hero.hero-dark .anat-side.right { align-items:flex-start; text-align:left; }
.eng-hero.hero-dark .cl { font-family:"Gloria Hallelujah","Comic Sans MS",cursive; color:var(--accent-warm-bright); font-size:13px; line-height:1.25; max-width:150px; position:relative; }
.eng-hero.hero-dark .anat-side.left .cl { padding-right:28px; }
.eng-hero.hero-dark .anat-side.left .cl::after { content:''; position:absolute; right:0; top:8px; width:22px; height:1px; background: rgba(255,88,32,.55); }
.eng-hero.hero-dark .anat-side.right .cl { padding-left:28px; }
.eng-hero.hero-dark .anat-side.right .cl::before { content:''; position:absolute; left:0; top:8px; width:22px; height:1px; background: rgba(255,88,32,.55); }
.eng-hero.hero-dark .anat-card { margin:0 10px; flex:none; }
.eng-hero.hero-dark .anat-card .render { width:150px; box-shadow: 0 0 0 1px rgba(255,255,235,.14), 0 22px 48px -24px rgba(0,0,0,.75); }
@media (max-width:640px){ .eng-hero.hero-dark .anat-side { gap:16px; } .eng-hero.hero-dark .cl { font-size:11px; max-width:108px; } }

/* ============================================================
   Looks wheel (in "Pick a Look" section), Themes gallery, and
   the auto-playing carousel. Scoped under wrapper classes.
   ============================================================ */
/* ---- Seven Looks wheel ---- */
.lookwheel { position:relative; }
.lookwheel .stage { position:relative; height:560px; max-width:640px; margin:0 auto; }
@media (max-width:820px){ .lookwheel .stage { transform:scale(.6); height:340px; transform-origin:top center; } }
.lookwheel .glow { position:absolute; top:50%; left:50%; width:520px; height:520px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(124,92,191,.14), rgba(210,48,0,.08) 46%, transparent 72%); z-index:0; }
.lookwheel .wring { position:absolute; top:50%; left:50%; width:470px; height:470px; border-radius:50%; border:1px dashed rgba(26,26,26,.14); transform:translate(-50%,-50%); }
.lookwheel .lkstage { position:absolute; top:50%; left:50%; width:200px; height:264px; transform:translate(-50%,-50%); z-index:3; }
.lookwheel .lk { position:absolute; inset:0; border-radius:16px; overflow:hidden; box-shadow:0 40px 80px -34px rgba(19,19,18,.5); opacity:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; color:#fff; font-family:'Instrument Serif',serif; }
.lookwheel .lk:first-child { opacity:1; }
.lookwheel .lk .badge { position:absolute; top:11px; left:11px; font-family:'Inter Tight',sans-serif; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(0,0,0,.28); color:#fff; }
.lookwheel .lk .big { font-size:1.4rem; line-height:1.1; }
.lookwheel .lk .mk { position:absolute; top:13px; right:13px; font-family:'Instrument Serif',serif; font-style:italic; font-size:.9rem; opacity:.9; }
.lookwheel .lk1 { background:radial-gradient(circle at 40% 30%, #ff7429, #d22222 60%, #b01818); }
.lookwheel .lk2 { background:linear-gradient(160deg,#22262d,#141517); }
.lookwheel .lk3 { background:linear-gradient(180deg,#3b3f47,#22262d); }
.lookwheel .lk4 { background:#f1f3f6; color:#1a1c20; }
.lookwheel .lk5 { background:#e9ebf0; color:#181b20; }
.lookwheel .lk6 { background:#e9ebee; color:#22242a; }
.lookwheel .lk7 { background:radial-gradient(circle at 50% 35%, #ff9a5c, #d22222 70%); }
.lookwheel .lk4 .badge,.lookwheel .lk5 .badge,.lookwheel .lk6 .badge { background:rgba(0,0,0,.12); color:#22262d; }
.lookwheel .lk .cupwrap { position:absolute; inset:0; display:grid; place-items:center; }
.lookwheel .lk .cupwrap svg { width:64px; height:64px; opacity:.9; }
.lookwheel .lk .stat { font-family:'Instrument Serif',serif; font-size:2.4rem; line-height:1; }
.lookwheel .lk .stat span { font-family:'Inter Tight',sans-serif; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:4px; opacity:.7; }
.lookwheel .lk .avatar { position:absolute; top:36%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; border-radius:50%; background:#b01818; display:grid; place-items:center; font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.3rem; color:#f1f1f5; }
.lookwheel .lk .phone2 { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:96px; height:136px; border-radius:15px; border:3px solid rgba(0,0,0,.25); background:#fff; }
.lookwheel .lbl { position:absolute; top:50%; left:50%; width:max-content; z-index:4; font-family:'Inter Tight',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border-radius:999px; padding:6px 12px; background:var(--paper); color:var(--ink-faint); border:1px solid var(--line-ink); transform:translate(-50%,-50%) rotate(var(--a)) translateX(225px) rotate(calc(-1*var(--a))); }
@media (prefers-reduced-motion:no-preference){ .lookwheel .lk { animation: lw-show 14s ease-in-out infinite; } .lookwheel .lbl { animation: lw-on 14s linear infinite; } }
@keyframes lw-show { 0%{opacity:0; scale:.95} 2%{opacity:1; scale:1} 12%{opacity:1; scale:1} 15%{opacity:0; scale:.97} 100%{opacity:0} }
@keyframes lw-on { 0%,1%{ background:var(--paper); color:var(--ink-faint); box-shadow:none; border-color:var(--line-ink); } 3%,12%{ background:var(--accent-ink); color:#fff; box-shadow:0 10px 24px -8px var(--accent-ink); border-color:transparent; } 15%,100%{ background:var(--paper); color:var(--ink-faint); box-shadow:none; border-color:var(--line-ink); } }

/* ---- Themes gallery (own section) ---- */
.theme-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:0 auto; }
@media (max-width:760px){ .theme-gallery { grid-template-columns:repeat(2,1fr); } }
.tg-card { border:1px solid var(--line-ink); border-radius:16px; background:var(--paper); padding:12px; box-shadow:0 30px 70px -56px rgba(26,26,26,.3); }
.tg-thumb { height:130px; border-radius:11px; }
.tg-name { font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink); margin:12px 4px 0; display:flex; align-items:center; gap:8px; }
.tg-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.tg-meta { font-size:12.5px; color:var(--ink-faint); margin:2px 4px 0; }

/* ---- Auto-playing carousel ---- */
.autocar { text-align:center; }
.autocar .phone-c { width:300px; margin:0 auto; border-radius:26px; border:1px solid var(--line-ink); background:#fff; box-shadow:0 44px 90px -46px rgba(19,19,18,.5); overflow:hidden; }
.autocar .phone-bar { display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid #eee; font-family:'Manrope'; font-size:12px; color:#8a8b93; }
.autocar .phone-bar .av { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 40% 30%,#ff7429,#b01818); }
.autocar .phone-bar b { color:#131316; font-weight:700; }
.autocar .viewport { overflow:hidden; }
.autocar .track { display:flex; width:500%; }
@media (prefers-reduced-motion:no-preference){ .autocar .track { animation: ac-slide 15s cubic-bezier(.7,0,.3,1) infinite; } }
@keyframes ac-slide { 0%,15%{transform:translateX(0%)} 20%,35%{transform:translateX(-20%)} 40%,55%{transform:translateX(-40%)} 60%,75%{transform:translateX(-60%)} 80%,95%{transform:translateX(-80%)} 100%{transform:translateX(0%)} }
.autocar .slide { width:20%; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:26px 24px; font-family:'Instrument Serif',serif; color:#fff; position:relative; }
.autocar .slide .kick { position:absolute; top:16px; left:0; right:0; font-family:'Inter Tight',sans-serif; font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.autocar .slide .mk { position:absolute; bottom:14px; left:0; right:0; font-family:'Instrument Serif',serif; font-style:italic; font-size:.9rem; opacity:.85; }
.autocar .slide .t { font-size:1.5rem; line-height:1.15; }
.autocar .s1 { background:radial-gradient(circle at 40% 25%,#ff7429,#d22222 60%,#b01818); }
.autocar .s2 { background:linear-gradient(160deg,#22262d,#141517); }
.autocar .s3 { background:#f1f3f6; color:#1a1c20; }
.autocar .s3 .kick,.autocar .s3 .mk { color:#b01818; opacity:.8; }
.autocar .s3 .num { font-size:3.4rem; line-height:1; color:#d22222; }
.autocar .s3 .sub { font-family:'Inter Tight',sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#566270; margin-top:6px; }
.autocar .s4 { background:linear-gradient(160deg,#3b3f47,#2a2d34); }
.autocar .s5 { background:radial-gradient(circle at 50% 40%,#ff9a5c,#d22222 70%); }
.autocar .dots { display:flex; gap:8px; justify-content:center; margin-top:20px; }
.autocar .dots i { width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block; }
@media (prefers-reduced-motion:no-preference){ .autocar .dots i { animation: ac-dot 15s linear infinite; } }
@keyframes ac-dot { 0%,15%{ background:var(--accent-ink); transform:scale(1.25) } 16%,100%{ background:var(--line-strong); transform:scale(1) } }
.autocar .dots i:nth-child(2){ animation-delay:-3s } .autocar .dots i:nth-child(3){ animation-delay:-6s } .autocar .dots i:nth-child(4){ animation-delay:-9s } .autocar .dots i:nth-child(5){ animation-delay:-12s }

/* ---- side-by-side: Looks (wheel left / text right) ---- */
.look-side .cols { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr); gap:clamp(24px,4vw,56px); align-items:center; }
.look-side .lookwheel { order:-1; }   /* wheel into the left (wide) column */
.look-side .i-head { text-align:left; max-width:none; margin:0; }
.look-side .i-head p { margin-left:0; margin-right:0; max-width:46ch; }
.look-side .why-eyebrow { justify-content:flex-start; }
@media (max-width:900px){ .look-side .cols { grid-template-columns:1fr; } .look-side .lookwheel { order:2; } .look-side .i-head { order:1; } }

/* ---- side-by-side: Themes (text left / gallery right) ---- */
.themes-side .cols { display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,56px); align-items:center; }
.themes-side .i-head { text-align:left; max-width:none; margin:0; }
.themes-side .i-head p { margin-left:0; margin-right:0; max-width:46ch; }
.themes-side .why-eyebrow { justify-content:flex-start; }
.themes-side .theme-gallery { grid-template-columns:repeat(3,1fr); max-width:none; }
@media (max-width:560px){ .themes-side .theme-gallery { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .themes-side .cols { grid-template-columns:1fr; } }

/* ---- side-by-side: Carousel (carousel left / text right) ---- */
.carousel-side .cols { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.carousel-side .autocar { order:-1; }
.carousel-side .i-head { text-align:left; max-width:none; margin:0; }
.carousel-side .i-head p { margin-left:0; margin-right:0; max-width:46ch; }
.carousel-side .why-eyebrow { justify-content:flex-start; }
@media (max-width:900px){ .carousel-side .cols { grid-template-columns:1fr; } .carousel-side .autocar { order:2; } .carousel-side .i-head { order:1; } }

/* ---- "Your real product in the render" (below carousel) ---- */
.prod-flow { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,44px); flex-wrap:wrap; max-width:920px; margin:0 auto; }
.prod-src { text-align:center; }
.prod-card { width:176px; aspect-ratio:4/5; border-radius:14px; background:radial-gradient(120% 90% at 50% 30%, #eef0f3, #dfe2e7); border:1px solid var(--line-ink); display:grid; place-items:center; box-shadow:0 24px 50px -34px rgba(19,19,18,.32); }
.prod-src .prod-lab { font-family:'Inter Tight',sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:11px; }
.bag { width:86px; height:auto; filter:drop-shadow(0 12px 16px rgba(0,0,0,.28)); }
.prod-arrow { color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:7px; }
.prod-arrow svg { width:26px; height:26px; }
.prod-arrow .amode { font-family:'Inter Tight',sans-serif; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }
@media (max-width:620px){ .prod-arrow svg { transform:rotate(90deg); } }
.prod-outs { display:flex; gap:14px; }
.prod-outs .render { width:168px; }
.render .bag-in { position:absolute; top:12%; left:50%; transform:translateX(-50%); width:40%; height:auto; z-index:2; filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.render--photo .r-plate { position:relative; z-index:3; }

/* ---- "What it won't do" as the render-checks QA panel (heading left / panel right) ---- */
.guard-side .cols { display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:clamp(28px,4.5vw,60px); align-items:center; }
.guard-side .i-head { text-align:left; max-width:none; margin:0; }
.guard-side .i-head p { max-width:44ch; margin:18px 0 0; }
.guard-side .why-eyebrow { justify-content:flex-start; }
.guard-side .qa { max-width:none; margin:0; }
.guard-side .qa-thumb { width:26px; height:32px; border-radius:5px; background:linear-gradient(155deg,#ff7429,#b01818); flex:none; }
@media (max-width:900px){ .guard-side .cols { grid-template-columns:1fr; } }

/* ============================================================
   HERO — a one-line brief flows into the engine core, and a
   finished render prints out of it. (Sits in .eng-hero .sbs.)
   ============================================================ */
.dh-orb { width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 32% 26%, #ff9a5c,#d22222 52%,#b01818); box-shadow:0 0 0 6px rgba(255,255,255,.04), 0 24px 70px -14px rgba(255,120,50,.6), inset 0 2px 12px rgba(255,255,255,.4); }
.dh-orb .disc { width:72px; height:72px; border-radius:50%; background:#161613; display:grid; place-items:center; box-shadow:inset 0 2px 8px rgba(0,0,0,.5); }
.dh-orb .disc img { width:52px; height:auto; display:block; }
@media (prefers-reduced-motion:no-preference){ .dh-orb { animation:dhpulse 4.6s ease-in-out infinite; } }
@keyframes dhpulse {
  0%,100% { box-shadow:0 0 0 6px rgba(255,255,255,.04), 0 24px 70px -14px rgba(255,120,50,.55), inset 0 2px 12px rgba(255,255,255,.4) }
  50%     { box-shadow:0 0 0 9px rgba(255,255,255,.06), 0 24px 90px -10px rgba(255,140,60,.85), inset 0 2px 12px rgba(255,255,255,.46) }
}
.dh-lens { position:relative; min-height:440px; display:flex; align-items:center; justify-content:center; }
@media (min-width:881px){ .dh-lens { transform:translateX(clamp(70px,10vw,132px)); } }
.dh-lens .g { position:absolute; left:46%; top:50%; width:440px; height:440px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(255,140,60,.24), rgba(124,92,191,.13) 46%, transparent 72%); z-index:0; }
.dh-lens .dh-lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.dh-lens .render { position:relative; width:clamp(210px,25vw,260px); z-index:2; margin-left:96px; box-shadow:0 0 0 1px rgba(255,255,235,.14), 0 36px 70px -20px rgba(0,0,0,.78); }
.dh-lens .dh-orb { position:absolute; left:calc(50% - 82px); top:50%; transform:translate(-50%,-50%); z-index:4; }
.dh-lens .brief { position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:3; background:rgba(36,32,48,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:11px 14px; box-shadow:0 22px 48px -26px rgba(0,0,0,.8); text-align:left; width:max-content; max-width:170px; }
.dh-lens .brief .t { font-family:'Inter Tight',sans-serif; font-weight:800; font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#ff9a5c; }
.dh-lens .brief .s { font-family:'Manrope',sans-serif; font-size:12px; color:rgba(255,255,245,.9); margin-top:3px; }

/* mobile: stack brief -> core -> render, drop the connector */
@media (max-width:760px){
  .dh-lens { min-height:auto; flex-direction:column; gap:14px; padding:6px 0; }
  .dh-lens .g, .dh-lens .dh-lines { display:none; }
  .dh-lens .brief, .dh-lens .dh-orb { position:static; transform:none; }
  .dh-lens .render { margin-left:0; }
}

/* ============================================================
   Design page — micro-motion + elevation
   ============================================================ */
/* elevation: bring the softest card up to the card family */
.tg-card { box-shadow: 0 30px 66px -44px rgba(26,26,26,.42); }

/* sheen layer on theme thumbs (off-screen when static) */
.tg-thumb { position: relative; overflow: hidden; }
.tg-thumb::after { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.22) 50%, transparent 66%); transform: translateX(-130%); }

@media (prefers-reduced-motion: no-preference){
  /* render gallery: gentle staggered float, like the idea hero cards */
  .render-gallery > div { animation: dz-float 7.5s ease-in-out infinite; }
  .render-gallery > div:nth-child(2){ animation-duration: 9s; animation-delay: -2.4s; }
  .render-gallery > div:nth-child(3){ animation-duration: 10s; animation-delay: -4.8s; }

  /* theme thumbs: slow diagonal sheen, staggered across the grid */
  .tg-thumb::after { animation: dz-sheen 7s ease-in-out infinite; }
  .tg-card:nth-child(2) .tg-thumb::after,
  .tg-card:nth-child(5) .tg-thumb::after { animation-delay: -2.3s; }
  .tg-card:nth-child(3) .tg-thumb::after,
  .tg-card:nth-child(6) .tg-thumb::after { animation-delay: -4.6s; }

  /* flow arrows: a small nudge to suggest movement */
  .attach-arrow svg, .prod-arrow svg { animation: dz-nudge 2.8s ease-in-out infinite; }

  /* product outputs: gentle float */
  .prod-outs .render { animation: dz-float 8s ease-in-out infinite; }
  .prod-outs .render:nth-child(2){ animation-duration: 9.4s; animation-delay: -2.6s; }
}
@keyframes dz-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
@keyframes dz-sheen { 0%,72%{ transform: translateX(-130%) } 88%,100%{ transform: translateX(130%) } }
@keyframes dz-nudge { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(4px) } }

/* ============================================================
   Themes — coverflow fan   |   Looks — oversized isometric + render reveal
   ============================================================ */

/* shared render faces (finished visuals) */
.rn{ position:absolute; inset:0; display:flex; flex-direction:column; font-family:'Instrument Serif','EB Garamond',serif; --rw:#d22222; }
.rn .mk{ position:absolute; top:12px; left:14px; font-family:'Manrope',sans-serif; font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; z-index:2; }
.rn .badge{ position:absolute; top:11px; right:11px; font-family:'Inter Tight',sans-serif; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,.26); color:#fff; z-index:2; }
.rn.dark .badge,.rn.dark .mk{ color:#f1f1f5; }
.rn .big{ margin-top:auto; padding:18px; font-size:1.25rem; line-height:1.06; }
.rn .sub{ padding:0 18px 18px; font-family:'Manrope',sans-serif; font-size:11px; opacity:.8; }
.rn.poster{ background:linear-gradient(150deg,#ff7429,#d22222); color:#fff; }
.rn.statement{ background:radial-gradient(120% 90% at 78% 12%, rgba(255,116,41,.42), transparent 55%), linear-gradient(160deg,#23262d,#141517); color:#f1f1f5; justify-content:center; }
.rn.photo{ background:linear-gradient(155deg,#3b3f47,#131417); color:#f1f1f5; justify-content:flex-end; }
.rn.photo .plate{ margin:0 16px 18px; background:rgba(20,12,7,.5); backdrop-filter:blur(3px); border-left:3px solid var(--rw,#d22222); padding:9px 12px; font-size:1.1rem; line-height:1.1; }
.rn.info{ background:#f1f3f6; color:#181b20; padding:20px; }
.rn.info .mk{ position:static; color:var(--rw,#d22222); }
.rn.info .h{ font-size:1.3rem; line-height:1.1; margin:6px 0 14px; }
.rn.info .stat{ display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:baseline; font-family:'Manrope',sans-serif; margin-bottom:8px; }
.rn.info .num{ font-family:'Instrument Serif',serif; font-size:1.4rem; color:var(--rw,#d22222); line-height:1; }
.rn.info .lab{ font-size:11px; color:#4a505a; line-height:1.3; }
.rn.illus{ background:linear-gradient(160deg,#edeff2,#dde0e6); color:#181b20; align-items:center; justify-content:center; text-align:center; }
.rn.illus .cup{ width:54%; margin-bottom:8px; }
.rn.portrait{ background:radial-gradient(circle at 50% 30%,#40444c,#17181a); color:#fff; align-items:center; justify-content:flex-end; }
.rn.portrait .av{ position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; background:#d22222; display:grid; place-items:center; font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.3rem; color:#f1f1f5; }
.rn.mockup{ background:linear-gradient(160deg,#e9ebee,#d6d9de); color:#1a1d22; display:grid; place-items:center; }
.rn.mockup .phone{ width:64px; height:98px; border-radius:12px; border:3px solid rgba(0,0,0,.26); background:#fff; box-shadow:0 10px 22px -12px rgba(0,0,0,.5); }

/* ---- Themes: coverflow fan ---- */
.themes-side .theme-fan-wrap{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); padding:26px 0 6px; margin-top:clamp(20px,3vw,40px); }
.theme-fan{ display:flex; justify-content:center; align-items:center; perspective:1650px; min-height:430px; }
.theme-fan .tfc{ --d:calc(var(--i) - var(--c)); position:relative; flex:0 0 auto; width:clamp(196px,21vw,262px); aspect-ratio:4/5; margin:0 -30px; border-radius:20px; overflow:hidden; transform:rotateY(calc(var(--d) * -20deg)) translateZ(-55px); transform-origin:center; transition:transform .52s cubic-bezier(.2,.8,.2,1), box-shadow .52s, filter .4s; box-shadow:0 42px 82px -40px rgba(20,12,6,.6); z-index:var(--z,1); cursor:pointer; }
.theme-fan .tfc:hover{ transform:rotateY(0deg) translateZ(96px) translateY(-12px) scale(1.05); z-index:40; box-shadow:0 64px 120px -32px rgba(20,12,6,.62); }
.theme-fan:hover .tfc:not(:hover){ filter:brightness(.82) saturate(.92); }
.theme-fan .tf-foot{ position:absolute; left:0; right:0; bottom:0; padding:36px 17px 15px; background:linear-gradient(transparent, rgba(15,9,5,.62) 62%); color:#fff; text-align:left; }
.theme-fan .tf-name{ font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; display:flex; align-items:center; gap:9px; }
.theme-fan .tf-name .dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.35); flex:none; }
.theme-fan .tf-meta{ font-family:'Inter Tight',sans-serif; font-size:11.5px; opacity:.82; margin-top:4px; }
@media (prefers-reduced-motion:reduce){ .theme-fan .tfc{ transition:none; } }

/* ---- Looks: oversized isometric, hooked right, render reveal ---- */
.look-iso{ position:relative; padding:clamp(60px,8vw,120px) 0; clip-path: inset(-400vh 0 -400vh -400vh); }
.look-iso .wrap{ position:relative; z-index:3; pointer-events:none; }
.look-iso .i-head{ text-align:left; max-width:min(44%,440px); margin:0; pointer-events:auto; }
.look-iso .why-eyebrow{ justify-content:flex-start; }
.look-iso .i-head p{ max-width:38ch; margin-left:0; margin-right:0; }
/* plane straddles the hero <-> section boundary (top of look-iso) */
.iso-stage{ position:absolute; top:0; left:0; right:0; height:clamp(600px,64vw,760px); transform:translateY(calc(-50% - 300px)); display:flex; justify-content:flex-end; align-items:center; perspective:2300px; z-index:2; }
.iso-plane{ display:grid; grid-template-columns:repeat(4, clamp(148px,15vw,208px)); gap:clamp(20px,2.2vw,36px); width:max-content; transform-origin:right center; transform:translateX(15%) rotateX(43deg) rotateZ(-27deg); transform-style:preserve-3d; }
.iso-plane .il-card{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.16); box-shadow:0 2px 5px rgba(20,12,6,.14), 0 20px 38px -14px rgba(20,12,6,.44), 0 44px 84px -26px rgba(20,12,6,.34); transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s; cursor:pointer; }
.iso-plane .il-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(158deg, rgba(255,255,255,.24), transparent 46%); pointer-events:none; z-index:1; }
.iso-plane .il-card:hover{ transform:translateZ(96px) rotateX(-43deg) rotateZ(27deg) scale(1.03); z-index:30; box-shadow:0 66px 124px -30px rgba(20,12,6,.55); }
/* render (the finished image) shows by default; the small format tag names the Look.
   Hover is just the card lift now, so the work is always visible, touch included. */
.il-lab{ position:absolute; top:11px; right:11px; z-index:4; padding:3px 9px; border-radius:999px; background:rgba(8,5,2,.5); backdrop-filter:blur(3px); color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.il-render{ position:absolute; inset:0; opacity:1; z-index:3; }
.il-render .badge{ display:none; }   /* the format tag replaces the render's own badge */
.il-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }   /* real finished image fills the card */
.iso-plane .il-card:has(.il-img){ border:0; background:#141517; }   /* image fills edge to edge, no coloured rim from the resting card bg */
.il-card.poster{ background:linear-gradient(150deg,#ff7429,#d22222); }
.il-card.statement{ background:radial-gradient(120% 90% at 76% 14%, rgba(255,116,41,.42), transparent 52%), linear-gradient(155deg,#23262d,#141517); }
.il-card.photo{ background:linear-gradient(150deg,#3b3f47,#131417); }
.il-card.info{ background:linear-gradient(155deg,#eef0f4,#dfe2e7); }
.il-card.illus{ background:linear-gradient(150deg,#edeff2,#dde0e6); }
.il-card.mockup{ background:linear-gradient(155deg,#eaecef,#d6d9de); }
.il-card.portrait{ background:radial-gradient(circle at 50% 30%,#40444c,#17181a); }

/* stack on smaller screens: heading on top, plane centered below */
@media (max-width:900px){
  .look-iso{ overflow-x:clip; }
  .look-iso .i-head{ max-width:none; text-align:center; }
  .look-iso .why-eyebrow{ justify-content:center; }
  .look-iso .i-head p{ margin-left:auto; margin-right:auto; }
  .iso-stage{ position:static; height:auto; transform:none; justify-content:center; margin:20px 0 6px; }
  .iso-plane{ transform:translateX(0) rotateX(40deg) rotateZ(-24deg) scale(.86); transform-origin:center; }
}

/* ============ step three: say-a-line-OR-photo choice (2026-09-07) ============ */
.sc-choice { max-width: 680px; margin: 0 auto; }
.sc-cards { display: flex; align-items: stretch; justify-content: center; }
.sc-card { flex: 0 1 292px; min-width: 0; background: #fff; border: 1px solid rgba(26,26,26,.12); border-radius: 16px; box-shadow: 0 22px 46px -30px rgba(26,26,26,.28); overflow: hidden; }
.sc-cap { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); padding: 12px 15px 0; }
.sc-text { padding: 8px 15px 16px; font-size: 16px; line-height: 1.4; color: var(--ink); min-height: 92px; }
.sc-photo { position: relative; margin: 8px 12px 12px; border-radius: 10px; overflow: hidden; height: 112px; }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-pin { position: absolute; left: 8px; top: 8px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 999px; padding: 3px 9px; }
.sc-or { align-self: center; font-family: 'Gloria Hallelujah', 'Comic Sans MS', cursive; color: var(--accent-warm-bright); font-size: 19px; padding: 0 clamp(14px, 2.4vw, 26px); transform: rotate(-4deg); flex: none; }
@media (max-width: 560px) {
  .sc-cards { flex-direction: column; }
  .sc-card { flex: 0 0 auto; width: 100%; max-width: 320px; }
  .sc-or { padding: 10px 0; }
}