.ware-page { --ware-forest: #173d32; --ware-ink: #18372f; --ware-muted: #596b60; --ware-cream: #f5f2e9; --ware-line: #d7decf; color: var(--ware-ink); background: var(--ware-cream); border-radius: 1.25rem; padding: clamp(1.35rem, 4vw, 3.5rem); margin: 1rem 0 2rem; }
.ware-page a { color: #25513f; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ware-page h1, .ware-page h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.ware-page h1 { font-size: clamp(2.65rem, 6vw, 4.8rem); margin: .7rem 0 1.3rem; }
.ware-page h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); margin: .55rem 0 1.2rem; }
.ware-page h3 { font-size: 1.1rem; line-height: 1.4; }
.ware-page p { max-width: 65ch; }
.ware-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .73rem; font-weight: 650; color: var(--ware-muted); }
.ware-lede { font-size: 1.25rem; line-height: 1.5; }
.ware-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .85fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.ware-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.6rem 0; }
.ware-chips span { font-size: .78rem; border: 1px solid var(--ware-line); border-radius: 2rem; padding: .35rem .7rem; }
.ware-buy-card { background: var(--ware-forest); color: #faf9f1; padding: 1.8rem; border-radius: 1rem; }
.ware-buy-card a { color: #f8ecd0; }
.ware-buy-card .ware-caption { color: #ccd8ca; }
.ware-status { display: inline-block; font-size: .75rem; border: 1px solid currentColor; border-radius: 2rem; padding: .25rem .6rem; }
.ware-price { font-size: 3.2rem; font-weight: 550; letter-spacing: -.06em; margin: 1.1rem 0 .25rem; line-height: 1.1; }
.ware-price span { font-size: 1rem; letter-spacing: 0; font-weight: 400; }
.ware-button { appearance: none; cursor: pointer; border: 1px solid transparent; border-radius: .6rem; padding: .8rem 1rem; min-height: 2.8rem; background: #f2e8c9; color: #153b30; font: inherit; font-weight: 600; line-height: 1.25; }
.ware-buy-card .ware-button { width: 100%; margin-top: 1rem; }
.ware-button:disabled { cursor: not-allowed; opacity: .6; }
.ware-button:hover:not(:disabled) { background: #fff4d8; }
.ware-button:focus-visible, .ware-page a:focus-visible, .ware-page textarea:focus-visible, .ware-page summary:focus-visible { outline: 3px solid #9e6d24; outline-offset: 4px; }
.ware-button-secondary { color: #fff; background: var(--ware-forest); margin-top: .75rem; }
.ware-button-secondary:hover:not(:disabled) { background: #255541; }
.ware-caption { color: var(--ware-muted); font-size: .85rem; line-height: 1.55; }
.ware-section { margin-top: clamp(2.4rem, 6vw, 4rem); padding-top: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--ware-line); }
.ware-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.7rem; }
.ware-feature p { font-size: .94rem; color: var(--ware-muted); }
.ware-number { font-family: Georgia, serif; font-size: 1.5rem; color: #7a896f; }
.ware-demo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: start; }
.ware-demo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .6rem; }
.ware-demo textarea { box-sizing: border-box; width: 100%; min-height: 13rem; resize: vertical; border: 1px solid #aebfa9; border-radius: .65rem; color: var(--ware-ink); background: #fdfcf8; padding: 1rem; font: .83rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-hash-result][data-result='match'] { color: #25513f; }
[data-hash-result][data-result='mismatch'] { color: #854924; }
.ware-steps { padding-left: 1.35rem; max-width: 80ch; }
.ware-steps li { padding-left: .4rem; margin: 1.2rem 0; }
.ware-page code { overflow-wrap: anywhere; font-size: .88em; background: #e8ecdf; color: #214a38; border-radius: .2rem; padding: .1rem .25rem; }
.ware-page details { padding: 1rem 1.2rem; border: 1px solid var(--ware-line); border-radius: .6rem; margin-top: 1.5rem; }
.ware-page summary { cursor: pointer; font-weight: 550; }
.ware-details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; }
.ware-artifact { border: 1px solid var(--ware-line); border-radius: .8rem; padding: 1.25rem; align-self: start; }
.ware-artifact dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .7rem; margin-top: 1.2rem; font-size: .85rem; }
.ware-artifact dt { color: var(--ware-muted); }
.ware-artifact dd { margin: 0; }
.ware-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ware-list h1 { max-width: 13ch; }
.ware-list-card { display: block; max-width: 43rem; background: #edf0e4; border: 1px solid var(--ware-line); border-radius: 1rem; padding: 1.6rem; margin: 2rem 0; text-decoration: none; }
.ware-list-card h2 { margin: 1.2rem 0 .7rem; font-size: 2rem; }
.ware-list-card:hover { border-color: #748d70; background: #e8eddd; }
.ware-list-bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; border-top: 1px solid var(--ware-line); padding-top: 1rem; margin-top: 1.2rem; font-size: .9rem; }
.ware-list-bottom span:last-child { margin-left: auto; font-size: 1.4rem; }
@media (max-width: 760px) { .ware-hero, .ware-demo, .ware-details { grid-template-columns: 1fr; } .ware-grid { grid-template-columns: 1fr; gap: 1rem; } .ware-hero { gap: 1rem; } .ware-buy-card { margin-top: .5rem; } .ware-page { border-radius: .8rem; } }
@media (prefers-reduced-motion: reduce) { .ware-page *, .ware-page *::before, .ware-page *::after { scroll-behavior: auto; } }