/* notasis site — 4/5 home page (/ and /en/): hero and product mock, how it works, features,
   institutions, pricing, FAQ, closing call to action. */

/* Hero */
.hero{padding:88px 0 72px}
.hero-inner{display:flex;flex-direction:column;gap:56px}
.hero-copy{display:flex;flex-direction:column;gap:24px;max-width:820px}
.hero-title{font-size:64px;line-height:66px}

/* Hero product mock (decorative, aria-hidden) */
.hero-mock{background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.hero-mock .nt-btn{cursor:default}
.hero-mock .nt-group-head{flex-wrap:wrap}
.mock-bar{min-height:44px;box-sizing:border-box;border-bottom:1px solid var(--line);background:var(--paper-sunken);display:flex;align-items:center;gap:16px;padding:0 16px;font-size:13px;color:var(--ink-muted);flex-wrap:wrap}
.mock-sep{color:var(--line-strong)}
.mock-title{color:var(--ink);font-weight:550}
.mock-count{margin-left:auto;color:var(--ink-subtle);font-size:12px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;padding:24px}
.mock-paper{position:relative;height:380px;background:var(--paper);border:1px solid var(--line);border-radius:4px;background-image:repeating-linear-gradient(transparent 0 27px,var(--line) 27px 28px)}
.mock-q{position:absolute;left:24px}
.mock-q1{top:28px;width:46%;height:96px}
.mock-q2{top:152px;width:62%;height:112px}
.mock-q3{top:292px;width:52%;height:64px}
.mock-student{position:absolute;right:20px;top:28px;width:30%;display:flex;flex-direction:column;gap:8px}
.mock-student-id{margin:0;font-size:12.5px;color:var(--ink-muted)}
.mock-panel{display:flex;flex-direction:column;gap:12px}
.mock-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Trust strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-sunken);padding:28px 0}
.strip-text{margin:6px 0 0;font-size:15px;line-height:22px}

/* How it works: step illustrations */
.card .step-num{font-size:12px;color:var(--ink-subtle)}
.step-art{height:72px}
.art-regions{position:relative}
.art-region{position:absolute;left:0;height:26px;border-radius:2px}
.art-region-1{top:6px;width:64%;border:1.5px solid var(--ink)}
.art-region-2{top:40px;width:82%;border:1.5px solid var(--accent);background:var(--accent-tint)}
.art-pages{display:flex;gap:6px;align-items:flex-end}
.art-page{width:36px;border:1px solid var(--line-control);border-radius:2px;background:var(--paper)}
.art-page-1{height:48px}
.art-page-2{height:56px}
.art-page-3{height:64px;border-color:var(--ink)}
.art-groups{display:flex;flex-direction:column;gap:6px}
.art-group-row{display:flex;gap:4px}
.art-chip{width:22px;height:14px;border-radius:2px;background:var(--nt-group)}
.art-chip-suggested{background:none;border:1px dashed var(--suggest);box-sizing:border-box}
.art-status{display:flex;align-items:center}

/* Human in control */
.split{align-items:center;gap:56px}
.legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:22px;color:var(--ink-muted)}
.legend li{display:flex;gap:10px}
.legend-swatch{flex:none;width:10px;height:10px;margin-top:6px;border-radius:2px}
.legend-swatch-suggested{border:1px dashed var(--suggest)}
.legend-swatch-confirmed{background:var(--accent)}
.legend-swatch-history{border:1.5px solid var(--ink);box-sizing:border-box}
.rubric-panel{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--paper-sunken);border:1px solid var(--line);border-radius:6px}
.rubric-panel-label{margin-bottom:4px}

/* Features: 4 x 2 grid of small items */
.feat-grid{gap:0;border:1px solid var(--line);border-radius:6px;background:var(--paper-raised)}
.feat{padding:24px;display:flex;flex-direction:column;gap:8px}
.feat-br{border-right:1px solid var(--line)}
.feat-bt{border-top:1px solid var(--line)}
.feat h3{margin:0;font-size:15px;font-weight:600}
.feat p{margin:0;font-size:14px;line-height:21px;color:var(--ink-muted)}

/* For institutions (dark block) */
.inst{background:var(--ink);color:var(--paper);border-radius:6px;padding:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px}
.inst .overline{color:var(--inverse-muted)}
.inst .h2{color:var(--paper)}
.inst-lede{margin:0;font-size:17px;line-height:27px;color:var(--inverse-muted)}
.btn-light,.btn-light:hover{background:var(--paper);color:var(--ink)}
.btn-outline-light,.btn-outline-light:hover{color:var(--paper);border-color:var(--inverse-line-control)}
.inst-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--inverse-line)}
.inst-item{padding:20px 20px 20px 0;border-bottom:1px solid var(--inverse-line)}
.inst-item:nth-child(even){padding:20px 0 20px 20px}
.inst-item-title{margin:0;font-weight:600;font-size:15px}
.inst-item-text{margin:6px 0 0;font-size:14px;line-height:21px;color:var(--inverse-muted)}

/* Pricing */
.plan{padding:32px;gap:16px}
.card .plan-price{margin:0;font-size:28px;line-height:32px;font-weight:560;letter-spacing:-0.02em}
.plan-list{margin:0;padding-left:18px;font-size:14px;line-height:24px;color:var(--ink-muted)}
.plan-cta{align-self:flex-start}

/* FAQ */
.faq-inner{display:flex;flex-direction:column;gap:24px}
.faq{border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq h3{margin:0;font-size:16px;line-height:24px;font-weight:600}
.faq p{margin:0;font-size:15px;line-height:24px;color:var(--ink-muted)}

/* Closing call to action */
.closing{padding:128px 0 112px}
.closing-inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.closing-title{font-size:56px;line-height:58px;max-width:760px}

@media (max-width:900px){
  .hero-grid,.faq{grid-template-columns:minmax(0,1fr)}
  .hero-title,.closing-title{font-size:44px;line-height:46px}
}
@media (max-width:600px){
  .mock-bar{font-size:12px;gap:8px}
  .mock-bar .mock-count{margin-left:0;width:100%}
  .hero-mock .hero-grid{padding:12px}
}