/* An offering's own page (tools/features.py), on top of main.css: the same type, colours and pictures as the home
   page. The opening is dark like the home page's, with the words on the left and the product on the right; then
   what buyers can do, how it works, what is included (dark), questions, and three related offerings. */

/* Opening */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  padding: calc(76px + clamp(20px, 3vw, 44px)) 0 clamp(72px, 9vw, 140px);
  isolation: isolate;
}
.page-hero::before {   /* a faint green light behind the picture */
  content: '';
  position: absolute;
  inset: -20% -10% auto 35%;
  height: 120%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(46, 90, 71, 0.32), rgba(46, 90, 71, 0) 100%);
  pointer-events: none;
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 clamp(40px, 6vw, 92px); padding: 0; list-style: none; font: 500 12.5px/1.4 var(--sans); letter-spacing: 0.03em; color: rgba(242, 245, 242, 0.62); }
.crumbs li + li::before { content: '/'; margin-right: 10px; opacity: 0.55; }
.crumbs a { display: inline-block; padding: 8px 0; margin: -8px 0; transition: color 0.3s; }   /* a larger tap area, same look */
.crumbs a:hover { color: var(--on-night); }
.crumbs [aria-current] { color: var(--on-night-2); }
.ph-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px clamp(20px, 2.4vw, 40px); align-items: center; }
.ph-copy { grid-column: 1 / span 5; }
.page-hero .stage { grid-column: 6 / span 7; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.page-hero .stage::after { box-shadow: inset 0 0 0 1px rgba(242, 245, 242, 0.08); }
.page-hero .label { margin: 0 0 22px; color: rgba(242, 245, 242, 0.8); }
.page-hero h1 { margin: 0 0 clamp(22px, 3vh, 32px); font: 400 clamp(44px, 4.3vw, 80px)/1 var(--serif); letter-spacing: -0.012em; color: #fff; }
.page-hero h1 em { font-style: italic; }
.page-hero .lede { margin: 0 0 clamp(30px, 4vh, 44px); max-width: 32em; font-size: clamp(15px, 1.12vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.88); }
.js .page-hero .rise { transition-duration: 1.6s; }
.js .page-hero .rise.d1 { transition-delay: 0.12s; }
.js .page-hero .rise.d2 { transition-delay: 0.26s; }
.js .page-hero .stage { transition-delay: 0.2s; }
/* the opening fades in from 1%, not 0: it looks the same, and browsers count it as shown from its first paint
   (fully transparent content is not counted, which made slow phones look slow to search engines) */
.js .page-hero .rise:not(.seen), .js .page-hero .stage:not(.seen) { opacity: 0.01; }

/* What buyers can do: the label beside, a large line, then four points */

.points { padding: clamp(96px, 13vw, 200px) 0 clamp(24px, 3vw, 40px); }
.points .wrap { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 40px; }
.points .label { margin: 1em 0; }
.points h2 { margin: 0 0 clamp(48px, 6vw, 88px); font: 300 clamp(44px, 5.6vw, 96px)/0.98 var(--serif); letter-spacing: -0.01em; }
.points h2 em { font-style: italic; color: var(--bronze); }
.point-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 4.4vw, 72px) clamp(24px, 3.4vw, 56px); margin: 0; padding: 0; list-style: none; }
.point-list li { padding-top: 24px; border-top: 1px solid var(--line); }
.point-list .num { display: block; margin-bottom: 22px; }
.point-list h3 { margin: 0 0 12px; font: 300 clamp(28px, 2.4vw, 40px)/1.08 var(--serif); }
.point-list p { margin: 0; max-width: 30em; color: var(--ink-2); font-size: clamp(15px, 1.05vw, 17px); }

/* What is included: a dark band */

.dark-band { background: var(--night); color: var(--on-night); padding: clamp(96px, 12vw, 180px) 0; }
.dark-band .label { color: var(--on-night-2); }
.included .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 120px); align-items: start; }
.included h2 { margin: 16px 0 0; font: 300 clamp(44px, 5.6vw, 96px)/0.98 var(--serif); letter-spacing: -0.01em; }
.included h2 em { font-style: italic; }
.checks { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-night); }
.checks li { display: flex; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line-night); font: 300 clamp(22px, 1.9vw, 31px)/1.25 var(--serif); }
.checks svg { flex: none; width: 16px; height: 16px; color: #94cdb5; transform: translateY(1px); }

/* Questions and answers */

.faq { padding: clamp(96px, 12vw, 180px) 0; }
.faq .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 120px); align-items: start; }
.faq h2 { margin: 16px 0 0; font: 300 clamp(44px, 5.6vw, 96px)/0.98 var(--serif); letter-spacing: -0.01em; }
.faq h2 em { font-style: italic; color: var(--bronze); }
.qa { border-bottom: 1px solid var(--line); }
.qa details { border-top: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding: 26px 0; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { margin: 0; font: 300 clamp(23px, 1.9vw, 31px)/1.25 var(--serif); transition: opacity 0.3s; }
.qa summary:hover h3 { opacity: 0.75; }
.plus { position: relative; flex: none; width: 14px; height: 14px; margin-top: 0.6em; }
.plus::before, .plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 0.4s var(--ease); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0deg); }
.answer p { margin: 0; padding: 0 3em 30px 0; max-width: 40em; color: var(--ink-2); font-size: clamp(15px, 1.08vw, 17.5px); }

/* Related offerings */

.related { padding: 0 0 clamp(96px, 12vw, 180px); }
.related .head h2 { color: var(--ink); }
.related .head .label { color: var(--mute); }   /* .head p is light, for the home page's dark section */
.related .head h2 em { color: var(--bronze); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px clamp(20px, 2.4vw, 40px); }
.rel { display: block; }
.rel-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--paper-2); }
.rel-pic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17, 22, 19, 0.06); pointer-events: none; }
.rel-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.rel:hover .rel-pic img { opacity: 0.88; }
.rel h3 { margin: 22px 0 6px; font: 300 clamp(26px, 2.1vw, 36px)/1.1 var(--serif); }
.rel .more { margin-top: 10px; }
.rel:hover .more { border-color: currentColor; }

/* Armenian sets wider */

html[lang='hy'] .page-hero h1 { font-size: clamp(32px, 3.1vw, 58px); line-height: 1.14; letter-spacing: 0; }
html[lang='hy'] :is(.points h2, .included h2, .faq h2) { font-size: clamp(36px, 4.4vw, 76px); line-height: 1.08; letter-spacing: 0; }
html[lang='hy'] :is(.point-list h3, .rel h3) { font-size: clamp(24px, 2vw, 34px); line-height: 1.2; }
html[lang='hy'] :is(.checks li, .qa summary h3) { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.35; }
html[lang='ru'] .page-hero h1 { font-size: clamp(40px, 3.9vw, 74px); }

/* Smaller screens */

@media (max-width: 1100px) {
  .ph-copy, .page-hero .stage { grid-column: 1 / -1; }
  .ph-copy { max-width: 40em; }
  .page-hero h1 { font-size: clamp(44px, 7vw, 76px); }
  html[lang='hy'] .page-hero h1 { font-size: clamp(32px, 5.4vw, 56px); }
  .included .wrap, .faq .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .points .wrap { grid-template-columns: 1fr; gap: 0; }
  .points .label { margin: 0 0 18px; }
  .rel-grid { grid-template-columns: 1fr; gap: 48px; }
  .rel-pic { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: calc(64px + 20px); }
  .crumbs ol { margin-bottom: 32px; }
  .page-hero h1 { font-size: clamp(36px, 10vw, 46px); }
  html[lang='hy'] .page-hero h1 { font-size: clamp(27px, 7.4vw, 34px); }
  html[lang='ru'] .page-hero h1 { font-size: clamp(32px, 8.6vw, 42px); }
  .page-hero .actions { flex-direction: column; align-items: stretch; }
  .page-hero .btn { justify-content: center; }
  .point-list { grid-template-columns: 1fr; gap: 36px; }
  .answer p { padding-right: 0; }
  .checks li { gap: 16px; padding: 18px 0; }
}
@media (pointer: coarse) { .crumbs a { padding: 13px 4px; margin: -13px -4px; } }   /* a fingertip tall */

/* The not-found page: the note alone in the dark opening, then every offering */

.not-found .page-hero { padding-bottom: clamp(64px, 8vw, 120px); }
.nf-copy { max-width: 46em; }
.not-found .page-hero .label { font-variant-numeric: tabular-nums; }
.not-found .related { padding-top: clamp(80px, 10vw, 150px); }