/* EdwardsApps, September 2026. Static adaptation of 21st.dev bento and
   Hirael's MIT Feature 08 spotlight pattern. See DESIGN-SOURCES.md. */
:root {
  --coal: #111813;
  --coal-raise: #202c23;
  --ink: #1d2920;
  --paper: #f6f8f3;
  --panel: #eaf0e5;
  --line: #dbe3d6;
  --muted: #566252;
  --green: #477d35;
  --green-ink: #306339;
  --lime: #b7ee63;
  --wrap: 80rem;
  --header-height: 88px;
  --step-5: clamp(2.3rem, 1.3rem + 3vw, 4.2rem);
  --step-4: clamp(1.85rem, 1.2rem + 2vw, 3rem);
}
html { scroll-padding-top: calc(var(--header-height) + 24px); }
body { -webkit-font-smoothing: antialiased; }
main { overflow: clip; }
img { max-width: 100%; }
h1, h2 { letter-spacing: -.045em; text-wrap: balance; }
h3 { letter-spacing: -.025em; }
button, input, textarea, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 200; }
.site-header { position: sticky; top: 0; z-index: 50; background: #111813f5; border-bottom: 1px solid #ffffff16; backdrop-filter: blur(20px); }
.nav { min-height: var(--header-height); padding-block: 1rem; gap: 2rem; }
.brand img { height: 31px; }
.nav-links { gap: clamp(1rem, 2vw, 1.8rem); }
.nav-links a, .nav-apps > summary { font-size: .88rem; font-weight: 500; }
.nav-links .nav-cta { padding: .72rem 1.15rem; border: 1px solid var(--lime); border-radius: 9px; background: var(--lime); color: var(--coal); font-weight: 650; }
.nav-links .nav-cta:hover { background: #d6ffa0; color: var(--coal); text-decoration: none; }
.nav-toggle { min-height: 44px; min-width: 66px; border: 1px solid #ffffff40; border-radius: 8px; background: transparent; color: #fff; }
.nav-apps > summary { color: #fff; cursor: pointer; list-style: none; padding: .65rem 0; }
.nav-apps > summary::-webkit-details-marker { display: none; }
.nav-apps > summary::after { content: '⌄'; display: inline-block; margin-left: .45rem; color: var(--lime); }
.nav-apps[open] > summary::after { transform: rotate(180deg); }
.nav-apps-panel { position: absolute; left: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); right: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); top: calc(100% - 1px); padding: 1.25rem; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 0 0 18px 18px; box-shadow: 0 25px 50px #08150925; }
.nav-app-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.nav-app-grid a { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem; color: var(--ink); border-radius: 11px; white-space: normal; }
.nav-app-grid a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav-app-grid img { width: 40px; height: 40px; border-radius: 10px; margin-bottom: .45rem; }
.nav-app-grid strong { font-size: .95rem; }
.nav-app-grid span { color: var(--muted); font-size: .78rem; }
.nav-apps-panel > .nav-app-help { display: flex; justify-content: space-between; color: var(--green-ink); padding: 1rem 1rem .1rem; margin-top: .5rem; border-top: 1px solid var(--line); }
.nav-apps-panel :focus-visible { outline-color: var(--green-ink); }
.articles-discovery { background: var(--coal); border: 0; }
.articles-discovery > a { max-width: var(--wrap); padding: .7rem var(--pad); color: #c5d2c0; font-size: .73rem; opacity: .95; }
.articles-discovery > a:hover { color: var(--lime); }
.articles-discovery-detail { color: #aebea7; }
.hero { position: relative; padding-block: clamp(3rem, 6vw, 6rem); background-color: var(--coal); background-image: radial-gradient(ellipse at 100% 100%, #61953b14, transparent 60%); }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { line-height: 1.12; }
.hero .lede { color: #c0cbbd; font-size: 1.08rem; line-height: 1.75; }
.kicker { font-family: var(--font-body); font-size: .7rem; letter-spacing: .13em; }
.kicker::before { width: 7px; height: 7px; border-radius: 1px; box-shadow: 11px 0 0 var(--ink), 22px 0 0 var(--green); margin-right: 36px; }
.hero .kicker::before, .home-contact .kicker::before { box-shadow: 11px 0 0 #fff, 22px 0 0 var(--lime); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; font: 600 .88rem/1.4 var(--font-body); border-width: 1px; border-radius: 9px; padding: .85rem 1.3rem; }
.button-primary::after, .button-accent::after { content: '↗'; font-size: 1.12rem; font-weight: 400; }
.hero .button-ghost { border-color: #ffffff3a; background: #ffffff05; }
.hero .button-ghost:hover { background: #ffffff10; }
.section { padding-block: clamp(3rem, 6vw, 6rem); }
.section-alt { background: #edf2e9; }
.section-intro { margin-bottom: 2.5rem; }
.section-intro > p { font-size: .98rem; }
.sheet-head { max-width: 24ch; }
.feature-shot { border-radius: 12px; }
.band-contact { padding-block: clamp(3rem, 6vw, 5.5rem); }
.band-contact h2 { max-width: 22ch; }
.band-contact .wrap > p { max-width: 65ch; }
.contact-option { border-radius: 14px; }
.site-footer { border-top: 1px solid #ffffff19; padding-top: 4rem; }
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 3rem; }
.footer-brand p { font-size: .92rem; color: #aebda8; margin-top: 1rem; }
.site-footer h3 { color: #aebda8; font-size: .68rem; letter-spacing: .14em; }
.site-footer li { margin: .6rem 0; font-size: .88rem; }
.footer-signoff { padding-top: 1.5rem; border-top: 1px solid #ffffff19; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 2rem; }
.footer-signoff p { margin: 0; }
.footer-note { font-size: .72rem; color: #aebda8; }
.consent-banner { inset: auto 1rem 1rem auto; width: min(36rem, calc(100% - 2rem)); border: 1px solid #738765; border-radius: 16px; padding: 1.3rem; justify-content: flex-start; box-shadow: 0 12px 65px #0005; }
.consent-banner p { font-size: .86rem; }
.consent-actions { flex-wrap: wrap; }
.consent-btn { min-height: 44px; font-size: .83rem; }
.consent-decline { border-color: #91a186; }
/* A pointer-following spotlight, adapted to progressive enhancement. */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), #b7ee6324, transparent 72%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-spotlight]::after { transition: opacity .25s; }
  [data-spotlight]:hover::after { opacity: 1; }
  .button, .nav-app-grid a, .product-card { transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
  .product-card:hover { transform: translateY(-3px); border-color: #a9bf96; box-shadow: 0 18px 38px #1932120c; }
  .hero-home-copy { animation: enter-up .65s ease-out both; }
  .app-stage { animation: enter-up .8s .08s ease-out both; }
}
@keyframes enter-up { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
/* Homepage: an editorial promise and an explorable real product window. */
.hero-home { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: 2rem; }
.hero-home-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(2rem, 4vw, 4rem); }
.hero-home h1 { font-size: clamp(3.1rem, 4.9vw, 5.3rem); max-width: 12ch; line-height: 1.04; margin-top: 1.4rem; }
.hero-home h1 span { display: block; color: var(--lime); }
.hero-home .lede { max-width: 47ch; margin-top: 1.6rem; font-size: 1.02rem; }
.hero-home .hero-note { font-size: .76rem; max-width: 50ch; margin-top: 1.4rem; color: #aebda8; }
.hero-home .hero-note strong { color: #d9e1d4; }
.hero-studio-status { display: flex; align-items: center; gap: .6rem; color: #d0ddc8; font-size: .75rem; }
.status-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 0 4px #b7ee6310; }
.app-stage { display: flex; flex-direction: column; min-width: 0; position: relative; background: #202d22; border: 1px solid #ffffff20; border-radius: 18px; padding: .85rem; box-shadow: 0 35px 70px #0004; }
/* Tabs precede their panel in source for keyboard and screen-reader order;
   their visual position remains beneath the product preview. */
.app-stage > .app-stage-top { order: 0; }
.app-stage > #app-preview { order: 1; min-width: 0; }
.app-stage > .app-switcher { order: 2; }
.app-stage-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem .35rem 1rem; font-size: .67rem; letter-spacing: .04em; color: #adbea5; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #60735a; }
.window-dots i:first-child { background: var(--lime); }
.app-preview-image { aspect-ratio: 1.55; display: flex; align-items: center; justify-content: center; background: #eff3eb; border-radius: 9px; overflow: hidden; padding: 1.1rem; }
.app-preview-image img { width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 5px; box-shadow: 0 6px 20px #14230c1a; }
.app-preview-image img.is-phone { width: auto; height: 100%; }
.app-preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem .45rem .5rem; }
.app-preview-caption strong { display: block; font: 600 1.02rem var(--font-display); color: #fff; }
.app-preview-caption span { display: block; color: #b2c1aa; font-size: .76rem; margin-top: .2rem; }
.app-preview-caption a { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: var(--lime); border: 1px solid #ffffff30; border-radius: 50%; text-decoration: none; font-size: 1.2rem; }
.app-preview-caption a:hover { background: var(--lime); color: var(--coal); }
.app-switcher { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin: 1rem -.1rem -.1rem; }
.app-switcher.is-ready { display: grid; }
.app-switcher button { cursor: pointer; min-width: 0; padding: .65rem .1rem; background: transparent; border: 1px solid transparent; border-radius: 9px; color: #aebda8; font-size: .63rem; }
.app-switcher button[aria-selected=true] { background: #ffffff0c; border-color: #b7ee6355; color: #fff; }
.app-switcher button:hover { background: #ffffff09; }
.app-switcher img { display: block; margin: 0 auto .45rem; width: 27px; height: 27px; border-radius: 7px; }
.hero-bottom-line { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid #ffffff1c; }
.hero-bottom-line p { margin: 0; color: #a6b79e; font-size: .72rem; }
.hero-bottom-line a { text-decoration: none; font-size: .72rem; color: #d5e1ce; white-space: nowrap; }
.proof-strip { background: var(--paper); }
.proof-grid li { padding-block: 1.8rem; }
.proof-grid strong { font-size: .9rem; }
.proof-grid span { font-size: .8rem; }
.product-filter { display: none; }
.product-filter.is-ready { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.product-filter-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.product-filter button { min-height: 40px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); padding: .5rem 1rem; font-size: .8rem; }
.product-filter button[aria-pressed=true] { background: var(--coal); color: #fff; border-color: var(--coal); }
.product-filter-output { color: var(--muted); font-size: .73rem; }
.product-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.product-collection > .product-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.1fr; }
.product-collection > .product-card { display: flex; flex-direction: column; }
.product-collection .product-card-grid { display: contents; }
.product-card { border-radius: 18px; box-shadow: none; }
.product-card-copy { padding: clamp(1.5rem, 3vw, 2.25rem); }
.product-card-copy > p { font-size: .92rem; }
.product-card-copy .product-promise { font-size: 1.3rem; max-width: 32ch; }
.product-title-row h3 { font-size: 1.4rem; }
.product-title-row .product-icon { width: 48px; height: 48px; border-radius: 12px; }
.product-eyebrow { font-size: .63rem; }
.product-card-copy .product-price-note { font-size: .8rem; }
.product-card .cta-row { gap: .8rem; }
.product-card .text-link { font-size: .8rem; }
.product-card .feature-pills { gap: .3rem; }
.product-card .feature-pills li { background: var(--paper); font-size: .66rem; padding: .3rem .5rem; border: 0; border-radius: 4px; }
.product-collection .product-card-media { margin-top: auto; height: 18rem; min-height: 0; background: #e8eee1; padding: 1.5rem; border-top: 1px solid var(--line); }
.product-collection > .product-card:first-child .product-card-media { height: 100%; border-top: 0; border-left: 1px solid var(--line); background: #e5eedb; }
.product-collection .product-card-media img { object-fit: contain; border-radius: 7px; box-shadow: 0 10px 26px #19321214; }
.product-collection .phone-product-media { background: #eae6f0; padding-bottom: 0; }
.product-collection .phone-product-media .phone-card-shot img { border-radius: 0; }
.build-steps { border-top: 0; display: grid; gap: 1rem; }
.build-steps li { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.build-steps li > span { display: grid; place-items: center; padding: 0; width: 36px; height: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.starting-price { border-radius: 0 12px 12px 0; box-shadow: none; }
.operator-grid { gap: 4rem; }
.operator-section .sheet-head { max-width: 21ch; }
.operator-proof strong { color: var(--green-ink); }
.operator-proof li { padding-top: 1rem; }
.article-home { background: #e8eedf; }
.article-home-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 4rem; align-items: center; }
.article-home h2 { max-width: 20ch; font-size: var(--step-4); }
.article-home p:not(.kicker) { color: var(--muted); font-size: .97rem; }
.article-home-visual { display: block; border: 1px solid #b3c79b; border-radius: 16px; background: #dae6c9; padding: 1.7rem; text-decoration: none; }
.article-home-visual img { display: block; border-radius: 12px; width: 100%; height: auto; }
.article-home-visual > span { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font: 600 .74rem var(--font-body); color: var(--green-ink); }
@media (min-width: 961px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
}
@media (max-width: 960px) {
  :root { --header-height: 76px; }
  .nav { gap: 0; padding-block: .9rem; }
  .nav-links { width: 100%; gap: .15rem; align-items: stretch; padding: 1rem 0 .5rem; max-height: calc(100dvh - 110px); overflow-y: auto; }
  .nav-links > li > a { display: block; padding: .6rem 0; }
  .nav-links .nav-cta { display: inline-flex; padding: .7rem 1.1rem; }
  .nav-apps-panel { position: static; padding: .5rem; border-radius: 10px; box-shadow: none; }
  .nav-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-app-grid a { padding: .8rem; }
  .nav-apps-panel > .nav-app-help { font-size: .75rem; padding: .8rem .3rem .4rem; white-space: normal; }
  .hero-home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .hero-home h1 { font-size: clamp(2.8rem, 5.6vw, 4rem); }
  .hero-home .lede { font-size: .92rem; }
  .app-preview-image { aspect-ratio: 1.2; padding: .5rem; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .brand img { height: 27px; }
  .hero-home-grid, .product-collection, .product-collection > .product-card:first-child, .article-home-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-home h1 { font-size: clamp(2.9rem, 11vw, 4.2rem); max-width: 13ch; }
  .hero-home .lede { font-size: 1rem; max-width: 49ch; }
  .hero-home .cta-row { gap: .6rem; }
  .hero-home .hero-note { max-width: 43ch; }
  .app-stage { margin-top: 1rem; }
  .app-preview-image { aspect-ratio: 1.55; padding: .65rem; }
  .hero-bottom-line { align-items: flex-start; gap: 1rem; }
  .hero-bottom-line p { max-width: 24ch; }
  .hero-bottom-line a { padding-top: .15rem; }
  .product-collection > .product-card:first-child .product-card-media { height: 15rem; border-left: 0; }
  .product-collection .product-card-media { height: 16rem; }
  .product-filter button { padding-inline: .8rem; font-size: .75rem; }
  .proof-grid { padding-block: .5rem; }
  .proof-grid li { padding-block: 1rem; }
  .operator-grid { gap: 1.5rem; }
  .article-home-grid { gap: 2rem; }
  .article-home-visual { padding: 1rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem; }
  .articles-discovery > a { gap: .5rem; font-size: .66rem; }
  .articles-discovery-detail { display: none; }
  .section-intro { margin-bottom: 1.5rem; }
}
@media (max-width: 350px) {
  .app-switcher { gap: .1rem; }
  .app-switcher button { font-size: .56rem; }
  .hero-home .button { padding-inline: .85rem; font-size: .8rem; }
  .footer-grid { gap: 1.2rem; }
  .site-footer li { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  .site-header { position: static; }
  .nav-links, .nav-toggle, .articles-discovery, .consent-banner, .app-switcher, .product-filter { display: none !important; }
  main { overflow: visible; }
  .hero, .band-contact { color: #111; background: #fff; }
}