/* content.css — cleaned, calmer, more unified */

.content-page.goal-page,
.content-page.why-page,
.content-page.pricing-page{
  --maxw: 860px;
  --text: rgba(238,242,255,0.86);
  --muted: rgba(238,242,255,0.62);
  --muted2: rgba(238,242,255,0.44);

  --w-thin: 300;
  --w-reg: 400;
  --w-mid: 600;
  --w-bold: 750;

  --padx: clamp(22px, 5vw, 56px);

  --hero-pad-y: clamp(96px, 14vh, 160px);
  --body-pad-y: clamp(48px, 7vh, 88px);
  --block-gap: clamp(42px, 6vh, 72px);

  --line: rgba(255,255,255,0.08);
  --panel: rgba(255,255,255,0.03);
  --panel-border: rgba(255,255,255,0.10);
}

.goal,
.why,
.pricing{
  width: 100%;
}

/* --------------------
   HERO
-------------------- */
.goal-hero,
.why-hero,
.pricing-hero{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--hero-pad-y) var(--padx);
  overflow: hidden;
  box-sizing: border-box;
}

.hero-bg{
  display: none;
}

.hero-bg::before,
.hero-bg::after,
.goal-hero::before,
.why-hero::before,
.pricing-hero::before{
  content: none;
  display: none;
}

.hero-inner{
  position: relative;
  width: 100%;
  max-width: 920px;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
}

.kicker{
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: var(--w-reg);
}

.hero-title{
  margin: 0;
  font-size: clamp(2.3rem, 4.1vw, 3.8rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  line-height: 1.06;
  color: rgba(238,242,255,0.96);
  text-shadow: 0 14px 40px rgba(0,0,0,0.42);
}

.hero-sub{
  margin: 0;
  max-width: 760px;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: var(--w-reg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(238,242,255,0.60);
}

.hero-hint{
  margin-top: 1.2rem;
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  color: rgba(238,242,255,0.46);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.hero-hint .dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(238,242,255,0.42);
}

.hero-hint .chev{
  font-size: 1rem;
  opacity: 0.68;
}

/* --------------------
   BODY
-------------------- */
.goal-body,
.why-body,
.pricing-body,
.price-body{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--body-pad-y) var(--padx);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.block{
  width: 100%;
  max-width: var(--maxw);
  align-self: center;
  text-align: center;
  position: relative;
}

.block::after{
  content: "";
  display: block;
  width: min(460px, 68%);
  height: 1px;
  margin: 2.5rem auto 0;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  opacity: 0.9;
}

.block:last-child::after{
  display: none;
}

/* --------------------
   HEADINGS
-------------------- */
.h2{
  margin: 0;
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  line-height: 1.08;
  color: rgba(238,242,255,0.95);
  font-size: clamp(1.8rem, 2.6vw, 2.45rem);
}

.h3{
  margin: 0;
  font-weight: var(--w-mid);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(238,242,255,0.90);
  font-size: clamp(0.98rem, 1.2vw, 1.16rem);
}

.h2 + .p,
.h3 + .p{
  margin-top: 0.9rem;
}

/* --------------------
   TEXT
-------------------- */
.p{
  margin: 0 auto;
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  font-weight: var(--w-reg);
  letter-spacing: 0.01em;
  line-height: 1.8;
  color: var(--text);
  max-width: 68ch;
}

.p + .p{
  margin-top: 0.9rem;
}

.muted{
  color: var(--muted);
}

.emphasis{
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  color: rgba(238,242,255,0.92);
}

.accent{
  color: rgba(238,242,255,0.95);
}

/* --------------------
   LISTS
-------------------- */
.list{
  margin: 1rem auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.72rem;
  max-width: 62ch;
}

.list li{
  position: relative;
  padding-left: 1.1rem;
  color: rgba(238,242,255,0.84);
  font-weight: var(--w-reg);
  letter-spacing: 0.02em;
  line-height: 1.7;
  text-align: left;
}

.list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(180,190,255,0.75);
  transform: translateY(-50%);
}

/* --------------------
   MANIFEST
-------------------- */
.manifest{
  margin-top: 1.8rem;
  display: grid;
  gap: 0.6rem;
  font-size: clamp(1.1rem, 1.65vw, 1.45rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.12em;
  color: rgba(238,242,255,0.86);
  text-transform: uppercase;
}

.manifest .accent{
  color: rgba(238,242,255,0.98);
}

/* --------------------
   FLOW
-------------------- */
.flow{
  margin-top: 1.5rem;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.flow-step.big{
  font-size: clamp(3rem, 5vw, 4.7rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  color: rgba(238,242,255,0.96);
}

.flow-step{
  width: min(580px, 92%);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  font-size: clamp(1rem, 1.08vw, 1.1rem);
  font-weight: var(--w-reg);
  letter-spacing: 0.03em;
  color: rgba(238,242,255,0.84);
  line-height: 1.6;
}

.flow-arrow{
  opacity: 0.38;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}

/* --------------------
   MICRO
-------------------- */
.micro{
  margin-top: 1.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: rgba(238,242,255,0.56);
  letter-spacing: 0.12em;
  font-weight: var(--w-reg);
  text-transform: uppercase;
  font-size: 0.8rem;
}

.micro .sep{
  opacity: 0.34;
}

.micro .pill{
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(238,242,255,0.86);
  font-weight: var(--w-mid);
  text-decoration: none;
}

.micro .pill:hover{
  text-decoration: none;
}

/* --------------------
   PULL / QUOTE
-------------------- */
.pull{
  margin-top: 0.4rem;
}

.pull-strong{
  font-size: clamp(1.24rem, 1.7vw, 1.6rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238,242,255,0.93);
}

.quote{
  margin: 1.15rem auto 0;
  padding: 1rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  max-width: 68ch;
  font-weight: var(--w-mid);
  letter-spacing: 0.04em;
  font-size: clamp(1.02rem, 1.12vw, 1.14rem);
  line-height: 1.7;
  color: rgba(238,242,255,0.90);
}

/* --------------------
   PRICES
-------------------- */
.prices{
  margin: 0.25rem auto 0;
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 860px;
}

@media (min-width: 900px){
  .prices{
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }
}

.price-card{
  border-radius: 16px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  padding: 1.15rem 1.15rem 1rem;
  text-align: center;
}

.price-name{
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238,242,255,0.56);
  margin-bottom: 0.7rem;
  font-weight: var(--w-reg);
}

.price-value{
  font-size: clamp(1.55rem, 1.9vw, 1.95rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  color: rgba(238,242,255,0.94);
}

.price-value span{
  font-size: 0.92rem;
  color: rgba(238,242,255,0.54);
  font-weight: var(--w-reg);
}

.price-sub{
  margin-top: 0.85rem;
  color: rgba(238,242,255,0.64);
  line-height: 1.72;
  letter-spacing: 0.02em;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------
   PRICING PAGE RHYTHM
-------------------- */
.content-page.pricing-page .price-body{
  margin-top: 0.5rem;
}

.content-page.pricing-page .price-body .list{
  max-width: 54ch;
}

.content-page.pricing-page .price-body .p + .list{
  margin-top: 1rem;
}

.content-page.pricing-page .price-body .list + .p{
  margin-top: 1rem;
}

.content-page.pricing-page .pricing-statement{
  margin-top: 2.2rem;
  margin-bottom: 2.2rem;
}

.content-page.pricing-page .price-quote{
  margin-top: 1.35rem;
  margin-bottom: 2.35rem;
}

.content-page.pricing-page .price-quote .annual-price{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82em;
  font-weight: 400;
}

.content-page.pricing-page .pricing-accordion{
  max-width: 68ch;
  margin: 2.6rem auto 0;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
}

.content-page.pricing-page .pricing-accordion summary{
  cursor: pointer;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238,242,255,0.92);
  list-style: none;
}

.content-page.pricing-page .pricing-accordion summary::-webkit-details-marker{
  display: none;
}

.content-page.pricing-page .pricing-accordion summary::after{
  content: "⌄";
  float: right;
  opacity: 0.7;
}

.content-page.pricing-page .pricing-accordion[open] summary{
  margin-bottom: 1.4rem;
}

.content-page.pricing-page .pricing-accordion[open] summary::after{
  content: "⌃";
}

.content-page.pricing-page .pricing-accordion .price-body{
  padding-top: 0.35rem;
}

.content-page.pricing-page .pricing-cta{
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.content-page.pricing-page .pricing-cta-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 0.9rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: rgba(238,242,255,0.90);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-page.pricing-page .pricing-cta-pill.primary{
  background: rgba(238,242,255,0.92);
  color: rgba(10,14,28,0.96);
  border-color: rgba(238,242,255,0.92);
}

/* --------------------
   RESPONSIVE
-------------------- */
@media (max-width: 640px){
  .content-page.goal-page,
  .content-page.why-page,
  .content-page.pricing-page{
    --hero-pad-y: 88px;
    --body-pad-y: 40px;
    --block-gap: 36px;
    --padx: 20px;
    --maxw: 100%;
  }

  .hero-sub{
    letter-spacing: 0.06em;
  }

  .list li{
    text-align: left;
  }

  .flow-step{
    width: 100%;
  }

  .block::after{
    width: min(320px, 72%);
    margin-top: 2rem;
  }
}

/* --------------------
   DOWNLOADS / RESOURCES PAGE
-------------------- */
.downloads-block {
  margin-top: 3rem;
}

.downloads-heading {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.download-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1.25rem;
  background: rgba(15, 23, 42, 0.32);
}

.download-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}

.download-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
}

.download-card-wide .download-preview {
  aspect-ratio: 4 / 1;
}

.download-file-only {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
}

.download-link {
  justify-content: center;
  width: fit-content;
}

/* --------------------
   LEGAL PAGES
-------------------- */
.legal-page .goal-body{
  max-width: 1120px;
  gap: clamp(54px, 7vh, 86px);
}

.legal-page .block{
  max-width: 900px;
}

.legal-page .block.align-left{
  text-align: left;
}

.legal-page .block.align-left::after{
  margin-left: 0;
  margin-right: auto;
  width: min(520px, 78%);
  background: linear-gradient(to right, var(--line), transparent);
}

.legal-page .h2{
  max-width: 900px;
  overflow-wrap: anywhere;
}

.legal-page .p{
  max-width: 78ch;
  margin-left: 0;
  margin-right: 0;
}

.legal-page .list{
  max-width: 74ch;
  margin-left: 0;
  margin-right: 0;
  gap: 0.58rem;
}

.legal-page .list li{
  line-height: 1.62;
  padding-left: 1.15rem;
}

.legal-page .table-wrap{
  width: 100%;
  overflow-x: auto;
  margin: 1.1rem 0 0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
}

.legal-page .legal-table{
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: rgba(238,242,255,0.86);
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.55;
}

.legal-page .legal-table th,
.legal-page .legal-table td{
  padding: 0.82rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.075);
}

.legal-page .legal-table th{
  color: rgba(238,242,255,0.96);
  font-weight: var(--w-bold);
  background: rgba(255,255,255,0.045);
  letter-spacing: 0.02em;
}

.legal-page .legal-table tr:last-child td{
  border-bottom: 0;
}

.legal-page code{
  display: inline-block;
  padding: 0.08rem 0.34rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(238,242,255,0.94);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.legal-page .h2 code{
  font-size: 0.72em;
  transform: translateY(-0.04em);
}

@media (max-width: 720px){
  .legal-page .goal-body{
    gap: clamp(42px, 6vh, 62px);
  }

  .legal-page .h2{
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .legal-page .p,
  .legal-page .list li{
    font-size: 0.98rem;
    line-height: 1.68;
  }

  .legal-page .table-wrap{
    border-radius: 14px;
  }

  .legal-page .legal-table{
    min-width: 620px;
  }
}

/* Legal subheading rhythm */
.legal-page .h3{
  margin-top: 2.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.legal-page .h2 + .h3{
  margin-top: 1.2rem;
}

.legal-page .h3 + .p,
.legal-page .h3 + .list{
  margin-top: 0;
}


/* Legal mobile hero balance */
@media (max-width: 720px){
  .legal-page .hero-title{
    font-size: clamp(2.35rem, 13vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    max-width: 92vw;
    overflow-wrap: normal;
    word-break: normal;
  }

  .legal-page .hero-sub{
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Legal mobile typography hierarchy - final override */
@media (max-width: 720px){
  .legal-page .hero-title{
    font-size: clamp(1.75rem, 7.8vw, 2.55rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    max-width: 94vw;
  }

  .legal-page .h2{
    font-size: clamp(1.02rem, 4.35vw, 1.18rem);
    line-height: 1.32;
    letter-spacing: 0.01em;
    font-weight: var(--w-bold);
  }

  .legal-page .h3{
    font-size: clamp(0.9rem, 3.9vw, 1rem);
    line-height: 1.38;
    letter-spacing: 0.08em;
    font-weight: var(--w-reg);
  }

  .legal-page .h4{
    font-size: clamp(0.84rem, 3.6vw, 0.94rem);
    line-height: 1.35;
    letter-spacing: 0.06em;
  }
}

/* ===== PUBLIC AURORA PRICING ACCORDION START ===== */

/*
 * Same glass surface as registration/login card.
 * Existing sizing, spacing and accordion behaviour untouched.
 */

.content-page.pricing-page .pricing-accordion {
    border:
        1px solid rgba(39, 221, 214, 0.34);

    background:
        linear-gradient(
            135deg,
            rgba(5, 27, 33, 0.74),
            rgba(10, 42, 49, 0.64)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 14px 34px rgba(0, 0, 0, 0.26),
        0 0 18px rgba(39, 221, 214, 0.06);

    -webkit-backdrop-filter:
        blur(18px) saturate(125%);

    backdrop-filter:
        blur(18px) saturate(125%);
}

/* ===== PUBLIC AURORA PRICING ACCORDION END ===== */

/* ===== PUBLIC AURORA ARTICLE PILLS START ===== */

/*
 * Mélyebb betekintés / public article pills.
 * Aurora interaction language matching authenticated
 * Type + Mood controls.
 */

.micro .pill {
    border:
        1px solid rgba(39, 221, 214, 0.34);

    background:
        linear-gradient(
            180deg,
            rgba(8, 35, 41, 0.72),
            rgba(5, 27, 33, 0.62)
        );

    color:
        rgba(226, 244, 245, 0.88);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 5px 14px rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter:
        blur(10px) saturate(125%);

    backdrop-filter:
        blur(10px) saturate(125%);

    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 120ms ease;
}

.micro .pill:hover,
.micro .pill:focus-visible {
    background:
        linear-gradient(
            180deg,
            rgba(255, 139, 56, 0.34),
            rgba(243, 111, 33, 0.27)
        );

    border-color:
        rgba(255, 154, 76, 0.88);

    color:
        rgba(255, 248, 240, 0.98);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 139, 56, 0.10),
        0 0 13px rgba(255, 111, 28, 0.22);

    outline: none;
}

.micro .pill:active {
    transform:
        translateY(1px);

    background:
        linear-gradient(
            180deg,
            rgba(255, 139, 56, 0.42),
            rgba(243, 111, 33, 0.34)
        );

    border-color:
        rgba(255, 164, 88, 0.96);
}

/* ===== PUBLIC AURORA ARTICLE PILLS END ===== */