/* Income tax return (INK2) landing page styles.
 *
 * Derived from compliance.css so the three service pages read as one
 * family: same hero, same eyebrow-and-heading rhythm, same cards. Only
 * the rules this page actually uses are here — no pricing cards, no
 * comparison table, no accordion — because this page is descriptive and
 * has nothing to sell yet.
 *
 * Scoped custom properties, same as its two siblings, so they do not
 * clash with base.html.
 */
.tax-return-landing {
  /* The house navy ramp from home.html, not the indigo/violet this file
     inherited from compliance.css. Purple reads as consumer software; a tax
     return is a document you sign. NIS2 and Nextcloud keep the purple — it
     suits them — so the two families are deliberately different now.

     No gold text anywhere here, and that is deliberate. home.html's #e8c877 is
     brass for a DARK ground -- the seal on the navy hero. Darkening it until it
     passes contrast on white lands it in ochre, which just reads muddy. This
     page is white, so the second tone is a lighter steel blue off the same
     ramp, and the warmth comes from a cream ground behind navy text instead. */
  --navy:          #1e4a75;
  --navy-dark:     #1a3a5c;
  --navy-deep:     #0f2640;
  --navy-soft:     #eef2f8;
  --steel:         #3f7cae;
  --cream:         #fbf7ef;
  --text-dark:     #16233a;
  --text-body:     #374151;
  --text-muted:    #5b6b82;
  --text-faint:    #9ca3af;
  --border:        #c9d6e8;
  --bg-white:      #ffffff;
  --bg-section:    #f7f9fc;
  --shadow-sm:     0 1px 3px rgba(30,74,117,.08), 0 4px 16px rgba(30,74,117,.06);
  --shadow-md:     0 4px 24px rgba(30,74,117,.13);
  background: var(--bg-white);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.tax-return-landing .lp-hero {
  padding: 7rem 1.5rem 5rem;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(63,124,174,.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 110%, rgba(30,74,117,.08) 0%, transparent 60%);
}
.tax-return-landing .lp-hero .badge-pill {
  display: inline-block;
  background: var(--cream);
  color: var(--navy-dark);
  border: 1px solid #e3dccb;
  border-radius: 50px;
  padding: .3rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.tax-return-landing .lp-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.12;
  max-width: 800px;
  margin: 0 auto .8rem;
  color: var(--navy-deep);
  letter-spacing: -.02em;
}
.tax-return-landing .lp-hero h1 .accent {
  color: var(--navy);
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--steel) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tax-return-landing .lp-hero .sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.tax-return-landing .lp-hero .cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.tax-return-landing .trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--navy-soft);
  padding: 1rem 1.5rem;
}
.tax-return-landing .trust-bar .items {
  display: flex; gap: 2.5rem; justify-content: center;
  flex-wrap: wrap; align-items: center;
}
.tax-return-landing .trust-bar .item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; color: var(--navy); font-weight: 600;
}
.tax-return-landing .trust-bar .item i { font-size: 1rem; }
.tax-return-landing .section-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel); margin-bottom: .5rem;
}
.tax-return-landing.overview-page .section-label {
  font-size: 1.05rem; letter-spacing: .09em; margin-bottom: .8rem;
}
.tax-return-landing .section-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800;
  line-height: 1.2; margin-bottom: 1rem;
  color: var(--navy-deep); letter-spacing: -.01em;
}
.tax-return-landing .section-desc {
  color: var(--text-muted); font-size: 1.05rem;
  line-height: 1.75; max-width: 580px;
}
.tax-return-landing .divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.tax-return-landing .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.tax-return-landing .feature-item {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.75rem; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.tax-return-landing .feature-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tax-return-landing .feature-icon {
  width: 2.6rem; height: 2.6rem; border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-soft) 0%, var(--cream) 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; font-size: 1.2rem; color: var(--navy);
}
.tax-return-landing .feature-item h6 { font-weight: 700; margin-bottom: .4rem; color: var(--navy-deep); }
.tax-return-landing .feature-item p { color: var(--text-muted); font-size: .9rem; margin: 0; line-height: 1.6; }
.tax-return-landing section { padding: 5rem 1.5rem; }


/* ── Form preview ──────────────────────────────────────────────────────────
   An illustration of the räkenskapsschema, not a reproduction of the paper
   blankett. The official sheet is a strong yellow; that works on paper, where
   it marks the one you post, and fights everything on a screen. Milky white
   paper and pale blue fields instead, so it belongs to this page.

   Capped in height with a fade at the foot: the real schema is dozens of rows,
   and showing all of them would turn an illustration into a document. */
.tax-return-landing .form-preview {
  margin: 0 auto 3rem;
  max-width: 820px;
}
.tax-return-landing .fp-sheet {
  position: relative;
  overflow: hidden;
  max-height: 30rem;
  padding: 1.75rem 1.75rem 0;
  border: 1px solid #d5e0ec;
  border-radius: 12px;
  background: linear-gradient(180deg, #fcfdff 0%, #f4f8fc 100%);
  box-shadow: var(--shadow-sm);
}
.tax-return-landing .fp-head { border-bottom: 1px solid #dde6f0; padding-bottom: 1.1rem; margin-bottom: 1.25rem; }
.tax-return-landing .fp-head h3 {
  font-size: 1.45rem; font-weight: 400; letter-spacing: -.01em;
  color: #2c4f7c; margin: 0 0 1rem;
}
.tax-return-landing .fp-dates { display: flex; gap: 2.5rem; justify-content: flex-end; flex-wrap: wrap; }
.tax-return-landing .fp-date label {
  display: block; font-size: .68rem; color: #8494ab; margin-bottom: .25rem;
}
.tax-return-landing .fp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.tax-return-landing .fp-group {
  font-size: .82rem; font-weight: 700; color: #2c4f7c;
  margin: .35rem 0 .5rem;
}
.tax-return-landing .fp-sub {
  font-size: .76rem; font-weight: 700; color: #5b6b82;
  margin: .75rem 0 .35rem;
}
.tax-return-landing .fp-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .3rem 0; border-bottom: 1px solid #e9eff6;
}
.tax-return-landing .fp-label {
  flex: 1; font-size: .72rem; line-height: 1.4; color: #4a5a72;
}
.tax-return-landing .fp-label b { font-weight: 700; color: #2c4f7c; margin-right: .3rem; }
.tax-return-landing .fp-field {
  flex: 0 0 4.6rem; text-align: center;
  font-size: .68rem; color: #9aa9bd;
  background: #eaf0f7; border: 1px solid #d3dfeb; border-radius: 4px;
  padding: .22rem 0;
}
.tax-return-landing .fp-field-filled {
  flex-basis: 6.5rem; color: #4a5a72; background: #fff;
}
/* The schema continues past the cap; fade rather than cut, so it reads as
   "more of the same" instead of as a rendering bug. */
.tax-return-landing .fp-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7rem;
  background: linear-gradient(180deg, rgba(244,247,253,0) 0%, #f4f8fc 78%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .tax-return-landing .fp-cols { grid-template-columns: 1fr; }
  .tax-return-landing .fp-sheet { max-height: 24rem; padding: 1.25rem 1.25rem 0; }
  .tax-return-landing .fp-dates { justify-content: flex-start; gap: 1.25rem; }
}