/* Calm below the fold (2026-11-06), on top of eddie-brand.css.
   The brand gradient is used only for the accent word and the main button. Screens and mockups are
   plain, like a real Mac; sections are simple centred headings over quiet bordered cards. */
:root { --wall: #1d1d22; --line-2: rgba(255, 255, 255, .09); }
:root[data-theme] { --wall: #16141a; }
.demo-scr .wall-mac, .wall-mac { background: var(--wall); }
.demo-scr .menubar { background: rgba(255, 255, 255, .06); }
.dc-card { background: #d9d6de; }
.dc-card::after { content: ""; display: block; width: 38%; height: 30%; margin: 9% 0 0 8%; border-radius: 4px; background: #fff; }
.more-view { background: #17161b; box-shadow: inset 0 0 0 1px var(--line-2); }
.cost-row .bar i { background: var(--accent); }

/* A truer MacBook: a hairline aluminium edge on the lid, a tapered base with feet, real-ish Dock apps. */
.mbp { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.mbp-lid { box-shadow: inset 0 0 0 1px #6b6c72, inset 0 0 0 2.5px #0c0c0e; }
.mbp-base { height: 14px; background: linear-gradient(180deg, #f1f1f3 0, #cfd0d4 18%, #a3a5aa 70%, #6e7075 100%); }
.mbp-base::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -3px; height: 3px; border-radius: 0 0 50% 50%; background: #3a3b3f; }
.mb-ico { width: 13px; height: 11px; flex: none; opacity: .92; }
.demo-dock { gap: 5px; padding: 4px 6px 5px; border-radius: 12px; background: rgba(40, 40, 46, .62); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.demo-dock .app { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 700 9px/1 var(--mono); color: #fff; }
.demo-dock .app.on::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.demo-dock .finder { background: linear-gradient(90deg, #3fa8f5 50%, #e8f4fd 50%); }
.demo-dock .safari { background: #fff; }
.demo-dock .safari::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#ff3b30 0 12%, #fff 0 50%, #ff3b30 0 62%, #fff 0); box-shadow: inset 0 0 0 1.5px #2f7cf6; }
.demo-dock .term { background: #1d1d1f; box-shadow: inset 0 0 0 .5px #555; }
.demo-dock .msg { background: #34c759; }
.demo-dock .msg::before { content: ""; width: 12px; height: 9px; border-radius: 50%; background: #fff; }
.demo-dock .sep { width: 1px; height: 20px; margin: 1px 1px 0; background: rgba(255, 255, 255, .25); }
.demo-dock img.app { object-fit: cover; }
.demo-dock .bin { background: rgba(255, 255, 255, .16); }
.demo-dock .bin::before { content: ""; width: 9px; height: 11px; border-radius: 1px 1px 3px 3px; box-shadow: inset 0 0 0 1.4px #e8e8ea; }
.demo-canvas, .demo-term { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .2), 0 18px 40px rgba(0, 0, 0, .55); }

/* Sections: centred title, grey line, quiet cards. Nothing tilted, no gradient panels. */
.ticker { display: none; }
.sec2 { padding: clamp(40px, 5vw, 64px) 0; }
.sec2 .h2, #try .h2 { font-size: clamp(28px, 3.1vw, 40px); }
.section-sub { margin: 10px auto 0; max-width: 620px; text-align: center; font-size: 17px; line-height: 1.5; color: #a1a1a6; }
.vs > div, .vs-b { padding: 26px 28px; border-radius: 22px; background: #111114 !important; box-shadow: inset 0 0 0 1px var(--line-2); transform: none; }
.vs h3 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #86868b; }
.vs-b h3 { color: var(--accent); }
.vs li { color: #c7c5cc; }
.vs-b li { color: #f5f5f7; }
.more-list button.on { background: #111114; box-shadow: inset 0 0 0 1px var(--line-2); }
.meet2 { margin: 0; padding: clamp(40px, 5vw, 64px) 0; transform: none; background: none; color: #f5f5f7; }
.meet2-grid { transform: none; gap: 40px; padding: 28px 34px; border-radius: 26px; background: #111114; box-shadow: inset 0 0 0 1px var(--line-2); }
.meet2 .h2 { text-align: left; }
.meet2 p { color: #a1a1a6; font-weight: 400; }
.meet2 .acts button { background: rgba(255, 255, 255, .08); color: #f5f5f7; box-shadow: inset 0 0 0 1px var(--line-2); }
.meet2 .acts button:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: none; }
.pcard2 { grid-template-columns: 1fr 1fr; background: #111114; box-shadow: inset 0 0 0 1px var(--line-2); }
.pcard2-l { padding: 32px 36px; background: none; color: #f5f5f7; border-right: 1px solid var(--line-2); }
.pcard2-was { color: #a1a1a6; }
.pcard2-was s { color: #6e6e73; }
.pcard2-pitch { color: #d1d1d6; }
.pcard2-l .hero2-fine { color: #86868b; }
.pcard2-buy, .pcard2-buy:hover { background: var(--g); color: #fff; box-shadow: none; }
.pcard2-r { padding: 30px 34px 30px 0; grid-template-columns: 1fr; }
.final2 { width: auto; margin: 0; padding: clamp(48px, 6vw, 80px) var(--gutter); border-radius: 0; background: none; color: #f5f5f7; }
.final2 .btn-blue, .final2 .btn-blue:hover { background: var(--g); color: #fff; box-shadow: none; }
.final2 .btn-ghost { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.btn-blue, .btn-blue:hover, .btn-blue:active { box-shadow: none; }
.btn-blue:hover { transform: translateY(-1px); }
@media (max-width: 720px) { .pcard2 { grid-template-columns: 1fr; } .pcard2-l { border-right: 0; border-bottom: 1px solid var(--line-2); } .pcard2-r { padding: 24px; } .meet2-grid { padding: 22px; } }

/* Room to breathe, like Koi (2026-11-06): a centred first screen, lighter headings, big gaps. */
.hero2 { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); }
.hero2-grid { display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5vw, 64px); text-align: center; }
.hero2-txt { max-width: 820px; }
.hero2 h1 { font-size: clamp(40px, 5.2vw, 72px); font-weight: 600; line-height: 1.06; letter-spacing: -.022em; }
.hero2-sub { max-width: 640px; margin: 22px auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.hero2 .ctas { justify-content: center; margin-top: 32px; }
.hero2-fine { margin-top: 18px; }
.hero2-demo { width: min(920px, 100%); }
.h2, .sec2 .h2, #try .h2 { font-weight: 600; letter-spacing: -.018em; line-height: 1.12; }
.sec2 { padding: clamp(72px, 9vw, 140px) 0; }
.section-sub, .try-sub { margin-top: 14px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.try-sub { margin-bottom: 40px; }
.vs, .more-grid { margin-top: 44px; gap: 20px; }
.vs > div { padding: 30px 32px; }
.vs li { padding: 9px 0; }
.pcard2 { gap: 0; }
.faq { margin-top: 36px; }
.faq summary { padding: 20px 36px 20px 0; }
.final2 { padding: clamp(80px, 9vw, 140px) var(--gutter); }
@media (max-width: 860px) { .hero2 { padding-top: 36px; } .sec2 { padding: 64px 0; } }
.hero2-demo { text-align: left; }

/* The lid: it opens when the MacBook scrolls into view and closes when it leaves, and the screen
   wakes up only once the lid is open. */
.mbp { perspective: 1800px; perspective-origin: 50% -30%; }
.mbp-lid { transform-origin: 50% 100%; transform: rotateX(0deg); transition: transform 1.25s cubic-bezier(.22, .9, .25, 1); will-change: transform; }
.mbp-lid .demo-scr { transition: filter .5s ease .55s, opacity .5s ease .55s; }
.mbp.shut .mbp-lid { transform: rotateX(84deg); transition-duration: .9s; transition-timing-function: cubic-bezier(.55, 0, .7, .3); }
.mbp.shut .mbp-lid .demo-scr { filter: brightness(.08); opacity: .6; transition-delay: 0s; transition-duration: .25s; }
.mbp.shut .mbp-name { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mbp-lid, .mbp-lid .demo-scr { transition: none; } }
.et-laptop { perspective: 1800px; perspective-origin: 50% -30%; }
.et-lid { transform-origin: 50% 100%; transition: transform 1.25s cubic-bezier(.22, .9, .25, 1); will-change: transform; }
.et-screen { transition: filter .5s ease .55s; }
.et-laptop.shut .et-lid { transform: rotateX(84deg); transition-duration: .9s; transition-timing-function: cubic-bezier(.55, 0, .7, .3); }
.et-laptop.shut .et-screen { filter: brightness(.08); transition-delay: 0s; transition-duration: .25s; }
@media (prefers-reduced-motion: reduce) { .et-lid, .et-screen { transition: none; } }

/* Features, the clean way: four big cards, then a quiet row of the small stuff. */
.fc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.fc { display: flex; flex-direction: column; border-radius: 26px; background: #111114; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.fc-txt { padding: 28px 30px 22px; }
.fc-tag { font-size: 14px; font-weight: 600; color: var(--accent); }
.fc h3 { margin: 10px 0 8px; font: 600 clamp(22px, 2.1vw, 27px)/1.15 var(--display); letter-spacing: -.015em; }
.fc p { margin: 0; font-size: 16px; line-height: 1.5; color: #a1a1a6; }
.fc-shot { position: relative; height: 200px; margin: auto 14px 14px; border-radius: 16px; background: var(--wall); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.fc-shot .isl { --r: 22px; font-size: 13.5px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.fc-shot .pane { padding: 0 16px 14px; white-space: normal; }
.fc-shot .ci-ttl { height: 44px; font-size: 12px; }
.fc-shot .clips { grid-template-columns: repeat(3, 1fr); }
.fc-shot .clipc { height: 98px; font-size: 12px; padding: 10px; transform: none; opacity: 1; }
.fc-shot .foc .tm { font-size: 36px; }
.fc-shot .rev .big { font-size: 42px; }
.fc-shot .rev .bars { height: 80px; }
.fc-shot .rev .bars i { transform: none; }
.fc-shot .cost-row { grid-template-columns: 96px 1fr 54px; height: 34px; font-size: 13px; }
.fc-shot .cost-row .bar i { width: var(--v); }
.more-h { margin: 64px 0 22px; text-align: center; font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -.015em; }
.more-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mt { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: 20px 22px; border-radius: 20px; background: #111114; box-shadow: inset 0 0 0 1px var(--line-2); }
.mt i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.mt svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mt b { font-size: 16px; font-weight: 600; }
.mt span { margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: #a1a1a6; }
@media (max-width: 900px) { .more-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .fc-grid, .more-tiles { grid-template-columns: 1fr; } .fc-shot { height: 260px; } .fc-txt { padding: 24px 22px 18px; } }

/* A little more filled (2026-11-06): works-with row, a soft glow behind the laptop, a flat ticker,
   detail chips on the feature cards, and slightly tighter sections. */
.hero2-works { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: #86868b; }
.hero2-works > span { margin-right: 4px; }
.hero2-works b { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: #e8e6ec; font-weight: 500; }
.hero2-works i { font-style: normal; color: var(--accent); }
.hero2-demo { position: relative; }
.hero2-demo::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 12%; bottom: -6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 55%, transparent), color-mix(in srgb, var(--c3) 30%, transparent) 55%, transparent); filter: blur(40px); pointer-events: none; }
.ticker.flat { display: block; transform: none; margin: 8px 0 0; padding: 12px 0; background: none; color: #f5f5f7; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font: 600 15px/1 var(--display); }
.ticker.flat i { color: var(--accent); opacity: 1; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fc-chips span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; color: #d1d1d6; }
.sec2 { padding: clamp(56px, 7vw, 104px) 0; }
.more-h { margin-top: 52px; }