/* Vjobo / Forest Studio. Component layer; no workflow or data changes. */

body{line-height:1.55}
.card,.empty-state{background:var(--surface);border-color:#dce0d0;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);min-width:0}
.card+.card{margin-top:20px}
.btn{border-radius:10px;line-height:1.25;font-weight:600}
.btn.primary{box-shadow:0 3px 8px rgb(28 44 35 / 12%)}
.btn.ghost{background:rgb(255 253 247 / 45%)}
.btn.ghost.active{background:#284d39;color:#fffdf7;border-color:#284d39;box-shadow:0 3px 8px rgb(28 44 35 / 12%)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.input,select,textarea{background:#fffef9;border-color:#cbd2c0;border-radius:9px;line-height:1.5;min-height:46px;padding:11px 13px}
.input:disabled,select:disabled,textarea:disabled{background:#eeefe7;color:#626957;cursor:not-allowed}
label{font-weight:600;font-size:12px;margin-top:16px;margin-bottom:7px}
textarea{resize:vertical}
.input:focus,select:focus,textarea:focus{border-color:#657650;box-shadow:0 0 0 3px rgb(101 118 80 / 16%)}
.row,.row3,.filters,.job-main-grid{gap:18px}
.row>*,.row3>*,.filters>*,.kpi>*,.list-item>*,.line>*{min-width:0}
.chip{border-radius:6px;font-size:11px;line-height:1.4;padding:5px 9px}
.check.on{color:#fffdf7;background:#284d39;border-color:#284d39}
.check:focus-visible{outline:3px solid #746124;outline-offset:3px}
.notice-box{background:#edf1e3;border-color:#c7d2b7;color:#284d39;padding:14px 16px}
.error-box{padding:14px 16px;background:#fff0ed;border-color:#e5b7af;color:#9d2b32}
.avatar{background:#e7ebd9;border-color:#cbd2ba;color:#284d39;font-weight:700;flex-shrink:0}
.marketing-page .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.marketing-page .feature-item{position:relative;isolation:isolate;overflow:hidden;display:block;padding:32px;min-height:280px;border:1px solid #d7ddca;border-radius:20px;background:linear-gradient(135deg,#fffdf7,#f0f2e7);box-shadow:var(--shadow)}
.feature-item::after{content:"";position:absolute;z-index:-1;right:-48px;top:-46px;width:160px;height:160px;border:24px solid rgb(131 145 111 / 10%);border-radius:50%;pointer-events:none}
.marketing-page .feature-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#e4ead7;color:#284d39;border:1px solid #d3dcc4;box-shadow:0 3px 0 rgb(40 77 57 / 5%);margin-bottom:26px}
.marketing-page .feature-icon svg{width:28px;height:28px}
.marketing-page .feature-item:nth-child(1){background:linear-gradient(135deg,#284d39,#192e22);border-color:#284d39}
.marketing-page .feature-item:nth-child(1) h3{color:#fffdf7}
.marketing-page .feature-item:nth-child(1) p{color:#e1e8d8}
.marketing-page .feature-item:nth-child(1) .feature-icon{background:#d7c580;border-color:#d7c580;color:#1c2c23}
.feature-item:nth-child(2) .feature-icon,.feature-item:nth-child(5) .feature-icon{background:#f0e6c3;border-color:#e1d5ab;color:#665527}
.marketing-page .feature-item:nth-child(3){background:#e8eddf}
.marketing-page .feature-item h3{font-size:22px;margin-bottom:12px}
.marketing-page .feature-item p{line-height:1.7}
.workflow-grid{gap:22px}
.workflow-grid article{position:relative;padding:30px;border:1px solid #d0d8c1;background:#f9faf1;border-radius:18px;box-shadow:0 8px 24px rgb(28 44 35 / 4%)}
.workflow-number{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#284d39;color:#f7f6e9;font-size:20px;font-weight:600;border:6px solid #e1e8d4}
.workflow-grid article:nth-child(2) .workflow-number{background:#d7c580;color:#1c2c23;border-color:#f0e8ce}
.workflow-grid article:nth-child(3) .workflow-number{background:#dce5cd;color:#284d39;border-color:#edf1e5}
.workflow-grid h3{margin:24px 0 12px}
.product-toolbar{border-radius:16px 16px 0 0;padding:18px 22px;background:#e9eddf}
.product-screenshot{border-radius:0 0 16px 16px;box-shadow:0 20px 60px rgb(28 44 35 / 10%)}
.faq-item,.faq-item:first-child{background:var(--surface);border:1px solid #dce0d0;border-radius:12px;padding:0 22px;margin-bottom:12px}
.faq-item summary{padding:20px 0;font-weight:600}
.faq-item[open]{border-color:#83916f;background:#f4f6ea}
.closing-section{background:radial-gradient(ellipse at 85% 0%,#3a5940,transparent 65%),#1c3226}
.marketing-page .closing-section h2{color:#fffdf7}
.marketing-page .closing-section .eyebrow{color:#d7c580}
.closing-section p{color:#e0e5d7}
.closing-section .btn.primary{background:#d7c580;color:#203222}
.closing-section .btn.primary:hover{background:#e4d49e}
.pricing-grid{align-items:stretch;gap:24px}
.marketing-page .pricing-card{display:flex;flex-direction:column;position:relative;padding:32px!important;border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.marketing-page .pricing-card .feature-icon{margin-top:14px;margin-bottom:24px}
.pricing-card .pricing-price{font-size:clamp(26px,2.4vw,34px);font-weight:700;line-height:1.2;padding-bottom:22px;border-bottom:1px solid var(--line)}
.pricing-card .pricing-features{flex:1;margin:16px 0 28px;padding-left:0;list-style:none}
.pricing-card .pricing-features li{position:relative;padding:10px 0 10px 25px;line-height:1.6}
.pricing-card .pricing-features li:before{content:"✓";position:absolute;left:0;top:10px;color:#48623e;font-weight:700}
.marketing-page .pricing-card.featured{background:#244331;color:#fffdf7;border-color:#244331;box-shadow:0 16px 40px rgb(28 44 35 / 14%)}
.pricing-card.featured h3,.pricing-card.featured .pricing-price{color:#fffdf7}
.pricing-card.featured .muted,.pricing-card.featured .pricing-features{color:#e3ead9}
.pricing-card.featured .pricing-price{border-color:#55704d}
.pricing-card.featured .pricing-features li:before{color:#d7c580}
.pricing-card.featured .btn.primary{background:#d7c580;color:#1c2c23}
.pricing-card.featured .pricing-badge{position:static;align-self:flex-start;background:#d7c580;color:#1c2c23;margin-bottom:10px;border-radius:6px}
.marketing-page:not(.landing-page) main>section.card{border-radius:20px;border:1px solid #d1dac0;padding:40px!important;margin-bottom:40px}
.contact-section{max-width:1120px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 56px;align-items:start}
.contact-section .section-head{padding-top:22px;text-align:left;max-width:none;margin:0}
.contact-section>.card{width:100%;max-width:none;grid-column:2;grid-row:1/3;padding:36px;border-radius:20px}
.contact-next{grid-column:1;display:grid;grid-template-columns:1fr;gap:14px;margin:0}
.contact-next>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;border:1px solid #d8ddcc;border-radius:14px;background:#eff2e6;padding:18px}
.contact-next .feature-icon{width:44px;height:44px;border-radius:12px;margin:0!important}
.contact-next .feature-icon svg{width:23px;height:23px}
body.login-page{background:radial-gradient(ellipse at 12% 20%,#dce5ce,transparent 48%),radial-gradient(ellipse at 90% 90%,#ede2ba,transparent 48%),#f4f1e9}
.login-wrap{max-width:500px;padding-top:64px;padding-bottom:64px}
.login .card{border:1px solid #cfd8c1;border-top:4px solid #284d39;border-radius:20px;padding:34px;box-shadow:0 20px 70px rgb(28 44 35 / 9%)}
.login .brand{margin-bottom:16px}
.login .btn.primary{box-shadow:0 4px 12px rgb(40 77 57 / 15%)}
body:not(.marketing-page):not(.login-page) header.top{padding:22px 28px;border-bottom:1px solid #d3dac7;gap:18px}
body:not(.marketing-page) .topbar-actions .btn.ghost:not(.active){border-color:transparent}
body:not(.marketing-page) main>h1{font-size:30px;font-weight:600;line-height:1.2;margin:10px 0 24px}
body:not(.marketing-page) main h2{font-size:13px;color:#4d6046;margin:28px 0 14px}
body:not(.marketing-page) .kpi{gap:18px;margin:22px 0!important}
.kpi .card{position:relative;padding:24px;border:1px solid #d5ddc6;border-top:0;border-radius:16px;min-height:136px;background:#edf1e3;justify-content:center;overflow:hidden}
.kpi .card:after{content:"";position:absolute;right:-30px;top:-45px;width:120px;height:120px;border:18px solid rgb(131 145 111 / 10%);border-radius:50%;pointer-events:none}
.kpi .card:first-child{background:#284d39;color:#fffdf7;border-color:#284d39}
.kpi .card:first-child>span,.kpi .card:first-child .muted{color:#dde6d3}
.kpi .card:nth-child(2){background:#f1ead1;border-color:#dfd6b6}
.kpi b{font-size:clamp(20px,2vw,28px);line-height:1.3;font-weight:600}
.kpi b.metric-value{font-size:38px}
.metric-unit{font-size:15px;font-weight:500;margin-left:5px}
.kpi .metric-detail{font-size:13px;text-transform:none;font-weight:400}
.card.table-card{border-radius:16px;box-shadow:var(--shadow);overflow:auto}
th{background:#e9edde;font-size:11px;font-weight:700;line-height:1.5;padding:16px 14px;color:#4c6043;white-space:nowrap}
td{padding:18px 14px;line-height:1.55;vertical-align:middle}
td .small{line-height:1.7}
td.actions{gap:6px}
tbody tr:last-child td{border-bottom:0}
.list-item{padding:12px 0;gap:18px;align-items:flex-start}
.list-item .when{min-width:68px;padding:12px 8px;border:0;border-radius:12px;background:#e5ecd8;color:#284d39}
.list-item .when b{font-size:18px}
.list-item .chip{margin-top:7px}
.list-item .small{font-size:13px}
.line{padding:14px 0;align-items:start;overflow-wrap:anywhere}
.line>b{text-align:right}
.line>span:first-child{flex-shrink:0;max-width:42%}
.empty-state{padding:48px 28px;background:linear-gradient(135deg,#f9faf2,#e8eddb);border-style:dashed}
.empty-state-title{font-size:22px;line-height:1.3}
.empty-state:before{content:"";display:block;width:44px;height:44px;margin:0 auto 22px;border:2px solid #83916f;border-radius:13px;box-shadow:8px 8px 0 #d7c580}
.header-stats{padding:12px 20px;background:#edf1e2;border:1px solid #d5ddc6;border-radius:12px}
.header-stats .stat b{font-size:21px}
nav.tabs a.active{background:#e4ebd6;border-radius:9px}
.form-page .card{padding:26px}
.form-page .job-main-grid{padding:26px;border:1px solid #d8dfcd;background:var(--surface);border-radius:16px;box-shadow:var(--shadow)}
.equip-row,.expense-row{padding:14px 0;gap:12px}
.remove-line{min-width:40px;min-height:40px;border-radius:8px;background:#f8eeea}
.add{min-height:44px;padding:8px 0}
.total{padding-top:18px;margin-top:18px;font-size:18px}
.form-actions{gap:14px;margin-top:26px}
.form-actions .btn{min-height:48px}
@media(min-width:721px) and (max-width:1300px){.wide .filters.filters-admin{grid-template-columns:repeat(4,minmax(0,1fr))}.wide .filters.filters-admin>div:last-child{grid-column:auto}}
@media(min-width:721px){.wide .card.table-card{overflow-x:auto}.table-card table{min-width:800px}}
@media(max-width:1100px){.marketing-page .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-grid{gap:16px}.workflow-grid article{padding:24px}.contact-section{gap:28px}}
@media(max-width:900px){.contact-section{display:block;max-width:680px}.contact-section>.card{margin:28px 0}.contact-next{margin:24px 0}.marketing-page .pricing-card .feature-icon{margin-top:0}.pricing-card .pricing-features{margin-bottom:22px}}
@media(max-width:720px){
 .card{padding:20px;border-radius:14px}.card+.card{margin-top:16px}
 .input,select,textarea{font-size:16px}
 body:not(.marketing-page):not(.login-page) header.top{padding:18px 16px;gap:12px}
 body:not(.marketing-page) .topbar-actions{flex-wrap:wrap;overflow:visible;gap:6px}
 body:not(.marketing-page) .topbar-actions .btn.sm{min-height:40px;padding:8px 10px;font-size:12px}
 body:not(.marketing-page) main>h1{font-size:27px;margin:8px 0 20px}
 .kpi .card{min-height:112px;padding:20px}.kpi b.metric-value{font-size:32px}
 .card.table-card{border:0;border-radius:0;box-shadow:none;overflow:visible}
 .table-card table{min-width:0}.table-card tr{border-radius:14px;margin-bottom:16px;background:var(--surface)}
 .table-card td{padding:13px 16px}.table-card td:first-child{background:#edf1e3}
 .table-card td:last-child{border-bottom:0}.table-card td.actions .btn{min-height:42px}
 .line{gap:14px}.line>span:first-child{max-width:45%}
 .form-page .card,.form-page .job-main-grid{padding:20px}.form-page .job-main-grid{gap:18px}
 .row,.row3,.filters{gap:14px}.form-actions{position:static}
 .header-stats{padding:12px 16px}.list-item{gap:12px}.list-item .when{min-width:58px;padding:10px 6px}
 .login-wrap{padding-top:36px}.login .card{padding:26px 22px}
}
@media(max-width:600px){
 .marketing-page .feature-grid{grid-template-columns:1fr;gap:16px}
 .marketing-page .feature-item{padding:26px;min-height:0}.marketing-page .feature-item h3{font-size:21px}
 .marketing-page .feature-icon{width:50px;height:50px;margin-bottom:20px}
 .workflow-grid{gap:16px}.workflow-grid article{padding:26px}
 .marketing-page .pricing-card{padding:28px!important}.pricing-card .pricing-price{font-size:30px}
 .marketing-page:not(.landing-page) main>section.card{padding:28px 22px!important}
 .contact-section>.card{padding:26px 22px}.contact-next .feature-icon{width:44px;height:44px;margin:0!important}
 .faq-item,.faq-item:first-child{padding:0 18px}.product-toolbar{padding:14px}
 .closing-section h2{font-size:36px}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
 .feature-item,.workflow-grid article,.pricing-card{transition:transform .2s ease,box-shadow .2s ease}
 .feature-item:hover,.workflow-grid article:hover,.pricing-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgb(28 44 35 / 10%)}
}
/* Keep featured-plan details legible and badge aligned inside its card. */
.pricing-card.featured .pricing-features li{color:#f4f1e9}
.pricing-card .pricing-badge{position:absolute;top:20px;left:32px;right:auto;transform:none}
.pricing-card{padding-top:76px!important}
.marketing-nav .btn.ghost.active{padding-inline:14px}
.metric-client{font-size:clamp(20px,2vw,28px);line-height:1.25;overflow-wrap:anywhere}
.pricing-card.featured .pricing-badge{position:absolute;top:20px;left:32px;transform:none;margin:0}
.marketing-page .pricing-card{padding-top:62px!important}
.marketing-page .topbar-actions .btn.ghost.active{padding-inline:14px}
/* Approved variant B: editorial photographs and readable text; welcome only. */
.landing-page.photo-cards .feature-grid .feature-item{padding:0 0 28px!important;background:#fffdf7!important;border:1px solid #d7dccb;border-radius:20px;box-shadow:0 7px 20px #1c2c2307;display:flex;flex-direction:column;overflow:hidden}
.landing-page.photo-cards .feature-item::after{display:none}
.photo-cards .feature-photo{display:block;width:100%;height:auto;aspect-ratio:1.8;object-fit:cover;background:#e6ebdd;margin-bottom:26px}
.landing-page.photo-cards .feature-grid .feature-item h3{font-size:18px;line-height:1.2;letter-spacing:-.2px;color:#1c2c23!important;margin:0 26px 16px;white-space:nowrap}
.landing-page.photo-cards .feature-grid .feature-item p{font-size:15px;line-height:1.7;color:#53614f!important;margin:0 26px;text-wrap:balance}
.photo-cards .workflow-grid article{padding:28px;border-radius:16px}
.photo-cards .workflow-grid article h3{font-size:23px;line-height:1.2;margin:0 0 14px}
.photo-cards .workflow-grid article p{font-size:15px;line-height:1.7}
@media(max-width:600px){.photo-cards .feature-grid{gap:16px!important}.photo-cards .feature-photo{aspect-ratio:1.75}.landing-page.photo-cards .feature-grid .feature-item h3{font-size:25px;max-width:19ch;white-space:normal}.landing-page.photo-cards .feature-grid .feature-item p{font-size:16px;line-height:1.65}.photo-cards .workflow-grid article{padding:26px}}

/* Shared interaction contracts: audit 2026-09-09. Layouts are scoped below. */

a { color:var(--link-color); text-underline-offset:.18em; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline:3px solid var(--focus-color); outline-offset:3px; }
.chip,.btn,.mono,.actions { overflow-wrap:normal; word-break:normal; }
.chip,.btn.sm { white-space:nowrap; }
.chip { width:fit-content; max-width:100%; }
.tab-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tabs a.active { font-weight:800; text-decoration:underline; text-underline-offset:5px; }
.nav-disclosure > summary { cursor:pointer; padding:10px 14px; min-height:44px; border:1px solid var(--line,#d3dbd4); border-radius:10px; }
.nav-disclosure nav { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; }
.admin-menu { position:relative; }
.admin-menu[open] nav { position:absolute; z-index:30; right:0; width:min(320px,85vw); padding:16px; background:#fffdf6; border:1px solid #d3dbd4; border-radius:12px; box-shadow:0 12px 24px #172a2020; }
.job-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.filter-disclosure > summary,.create-disclosure > summary,.industry-disclosure > summary { cursor:pointer; font-weight:650; padding:8px; min-height:44px; }
.create-disclosure form { max-width:720px; margin-top:16px; }
.filter-disclosure form { margin-top:16px; }
.empty-state { max-width:720px; }
.empty-state li { margin:10px 0; }
.product-section .product-screenshot { display:block; overflow:visible; }
.product-section .product-screenshot img { min-width:0; width:100%; height:auto; }
.marketing-page .pricing-card h2,.marketing-page .pricing-card h3 { font-size:26px; line-height:1.2; }
.mobile-start { display:none; }
.table-card .jobs-table { table-layout:auto; }
.jobs-table td.mono,.jobs-table .actions,.jobs-table .chip { white-space:nowrap; }
.jobs-table td:nth-child(2),.jobs-table td:nth-child(3) { min-width:130px; max-width:260px; overflow-wrap:break-word; }
.password-toggle { margin:6px 0 14px; }
@media(min-width:761px) {
 .marketing-header .nav-disclosure > summary { display:none; }
 .marketing-header .nav-disclosure:not([open]) > nav { display:flex; }
}
@media(max-width:760px) {
 .marketing-header.top { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; position:relative; }
 .marketing-header .brand { min-width:0; font-size:20px; }
 .marketing-header .brand img { width:26px; height:26px; margin-right:4px; }
 .mobile-start { display:inline-flex; padding:10px; }
 .marketing-header .nav-disclosure[open] nav { position:absolute; z-index:40; left:0; right:0; top:100%; padding:14px; background:#fffdf6; border:1px solid #d3dbd4; border-radius:12px; }
 .marketing-header .nav-disclosure nav .primary { display:none; }
 .topbar-actions { min-width:0; }
 .industry-disclosure .industry-grid { grid-template-columns:1fr; }
 .kpi-admin { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .kpi-admin .card { padding:10px; }
 .kpi-admin .metric-value { font-size:24px; }
 .kpi-admin .metric-detail { font-size:12px; }
 .table-card tbody tr { padding:12px; }
 .table-card tbody td { padding:5px 0; }
 .table-card tbody td .chip { display:inline-flex; flex-grow:0; }
 .jobs-table td:nth-child(2),.jobs-table td:nth-child(3) { min-width:0; max-width:none; }
 .jobs-table td.mono { white-space:normal; }
}

.bounded-form { max-width:640px; }
.pricing-page .workflow-grid .card { display:flex; flex-direction:column; }
.pricing-page .workflow-grid h2 { font-size:26px; line-height:1.25; }
.mobile-job-list { display:none; }
@media(max-width:760px) {
 .desktop-jobs { display:none; }
 .mobile-job-list { display:grid; gap:12px; }
 .mobile-job-list .compact-job { margin:0; padding:16px; }
 .compact-job-heading { display:flex; align-items:start; justify-content:space-between; gap:10px; }
 .compact-job-heading>b { font-size:16px; }
 .compact-job p { margin:8px 0; }
 .compact-job-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
 .compact-job-meta a { padding:8px 0; font-weight:700; }
 .compact-job details summary { min-height:32px; padding:8px 0; cursor:pointer; }
 .compact-job dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
 .compact-job dd { margin:0; }
 .kpi-admin .metric-client { font-size:14px; overflow-wrap:break-word; }
 .kpi-admin .metric-detail { font-size:11px; }
 .people-table tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
 .people-table tbody td { border:0; }
 .people-table tbody td:last-child { grid-column:1/-1; }
 .people-table tbody td .btn { width:auto; }
}
.regional-note { padding:16px 24px 90px; font-size:12px; color:var(--muted); text-align:center; }
@media(max-width:760px) {
 .desktop-label { display:none; }
 body:not(.marketing-page) .wide header.top { flex-wrap:nowrap; }
 body.wide:not(.marketing-page) header.top { flex-wrap:nowrap; gap:8px; }
 body.wide:not(.marketing-page) .topbar-actions { flex-wrap:nowrap; gap:6px; }
 body.wide:not(.marketing-page) header.top .brand small { display:none; }
}