@font-face { font-family: "Instrument Serif"; src: url("../prototypes/ux-p1/assets/fonts/instrument-serif-latin-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../prototypes/ux-p1/assets/fonts/cabin-latin-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { color-scheme: light; --paper:#f0eee8; --white:#faf9f5; --warm:#e9e4da; --ink:#202829; --muted:#566162; --pine:#1d2a2d; --amber:#b87835; --line:#c4c8c2; --focus:#945717; font: 16px/1.5 "Cabin", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
:is(button,a,input,textarea,select):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
a { color:var(--pine); }
.skip-link { position:absolute; left:12px; top:-100px; padding:10px; background:var(--white); z-index:20; }
.skip-link:focus { top:10px; }
.prototype { padding:9px clamp(18px,3vw,44px); background:var(--warm); font-size:.8rem; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(18px,3vw,44px); border-bottom:1px solid var(--line); background:var(--white); }
.wordmark { color:var(--ink); text-decoration:none; font:2rem/1 "Instrument Serif", Georgia, serif; }
.masthead small { color:var(--muted); }
.shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100svh - 122px); }
.side { display:flex; flex-direction:column; gap:4px; padding:30px 14px; border-right:1px solid var(--line); background:var(--warm); }
.side p { margin:0 12px 16px; color:var(--muted); font-size:.84rem; }
.side a { padding:11px 12px; border-left:2px solid transparent; text-decoration:none; }
.side a[aria-current="page"] { border-color:var(--amber); background:var(--white); font-weight:700; }
main { width:min(100%,1320px); margin:auto; padding:clamp(26px,4vw,54px) clamp(18px,4vw,58px) 80px; }
h1,h2,h3 { font-family:"Instrument Serif",Georgia,serif; font-weight:400; line-height:1; }
h1 { margin:8px 0 18px; font-size:clamp(2.8rem,5vw,5rem); }
h2 { margin:0 0 14px; font-size:clamp(1.9rem,2.5vw,2.6rem); }
h3 { margin:0 0 10px; font-size:1.65rem; }
p { margin:0 0 14px; }
.eyebrow { color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.lead { max-width:70ch; color:var(--muted); font-size:1.07rem; }
.notice { padding:13px 17px; margin-bottom:25px; border-left:3px solid var(--amber); background:var(--white); }
.scope { padding:16px 0; margin:25px 0 34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.button,button.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 16px; border:1px solid var(--pine); border-radius:2px; text-decoration:none; font-weight:700; }
.primary { background:var(--pine); color:var(--white); }
.secondary { background:transparent; color:var(--pine); }
.plain-action { min-height:44px; padding:9px 0; border:0; border-bottom:1px solid var(--pine); background:transparent; color:var(--pine); font-weight:700; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:25px 0; }
.form-card,.plan-card,.order-card,.review-card { padding:clamp(20px,2.6vw,32px); border:1px solid var(--line); background:var(--white); }
.form-card { max-width:850px; margin:0 0 34px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.wide { grid-column:1/-1; }
.field label { font-weight:700; }
.field input,.field textarea,.field select { width:100%; min-height:46px; padding:10px 12px; border:1px solid #8e9b98; background:var(--white); color:var(--ink); }
.check-row { display:flex; align-items:start; gap:12px; margin:16px 0; }
.check-row input { width:20px; height:20px; flex:none; margin:3px 0 0; }
.review-card form { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.field textarea { min-height:110px; resize:vertical; }
.field small,.note { color:var(--muted); font-size:.84rem; }
.form-card .actions { margin-top:24px; }
.plan-list,.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:15px; }
.plan-card { display:flex; flex-direction:column; }
.plan-card .actions { margin-top:auto; padding-top:15px; }
.tag { display:inline-block; padding:3px 8px; background:var(--warm); color:var(--ink); font-size:.75rem; font-weight:700; }
.meta { color:var(--muted); font-size:.85rem; }
.money { margin:15px 0; font-family:"Instrument Serif",Georgia,serif; font-size:2.5rem; }
.empty { padding:28px; border:1px dashed var(--line); color:var(--muted); }
.order-list { margin-top:40px; }
.section-link { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.payment-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 36px; }
.payment-summary > div { display:flex; flex-direction:column; min-width:0; padding:19px; background:var(--white); border:1px solid var(--line); }
.payment-summary strong { font:2.2rem/1 "Instrument Serif",Georgia,serif; }
.payment-summary span { margin-top:7px; color:var(--muted); font-size:.84rem; }
.order-card { display:flex; justify-content:space-between; align-items:start; gap:24px; margin-bottom:10px; }
.order-card > div:first-child { min-width:0; flex:1; }
.order-card .actions { max-width:250px; align-items:stretch; flex-direction:column; }
.order-card p { margin:5px 0; }
.activation-state { font-weight:700; margin-top:15px !important; }
.milestone-list { list-style:none; padding:0; margin:18px 0; border-top:1px solid var(--line); }
.milestone-list li { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.milestone-list strong { color:var(--muted); font-size:.78rem; }
.price-shell { background:var(--paper); }
.price-intro { padding:clamp(30px,5vw,68px) clamp(18px,4vw,58px); background:var(--white); }
.price-intro > div { max-width:1200px; margin:auto; }
.price-main { max-width:1200px; }
.price-card { padding:30px; border:1px solid var(--line); background:var(--white); }
.price-card ul,.review-card ul { padding-left:20px; }
.price-card li,.review-card li { margin-bottom:7px; }
.price-card .button { margin-top:18px; }
.review-card { max-width:720px; }
.review-card dl { display:grid; grid-template-columns:minmax(120px,.5fr) minmax(0,1fr); gap:8px 20px; }
.review-card dt { color:var(--muted); }
.review-card dd { margin:0; }
.footer-note { max-width:1200px; margin:0 auto; padding:20px clamp(18px,4vw,58px) 40px; color:var(--muted); font-size:.84rem; }
@media(max-width:760px) { .shell { display:block; } .side { flex-direction:row; flex-wrap:wrap; padding:10px; border-right:0; border-bottom:1px solid var(--line); } .side p { width:100%; margin:0 6px; } .side a { padding:9px; } .field-grid { display:block; } .field { margin-bottom:17px; } .payment-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .order-card { display:block; } .order-card .actions { max-width:none; margin-top:13px; } }