/* Dayspring inner pages: products, About Us, Careers, Contact Us.
   Loaded after site.css and fx.css. Layout/motion only: content is unchanged. */

/* ---------- Shared inner-page pieces ---------- */
.hx-hero--sheet { padding-bottom: calc(var(--hx-sheet-r) + clamp(32px, 5vw, 64px)); }
.hx-title--md { font-size: clamp(34px, min(5.2vw, 9.5vh), 68px); }
.hx-hero__head { position: relative; }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 26px; }
.fx .section--light .hx-btn, .fx .contact .hx-btn { border-color: var(--ink); --sticker: var(--ink); }
.fx .section--light .hx-btn:hover, .fx .contact .hx-btn:hover { background: linear-gradient(256deg, var(--blue-700) 0%, var(--blue-300) 148%); }
.hx-stage--auto { height: auto; }

/* ---------- Product pages ---------- */
.hx-brand { margin-bottom: 22px; }
.hx-brand span { border: 2px solid #0b1a3a; box-shadow: 5px 5px 0 var(--amber); animation: hxFloat 6s ease-in-out infinite alternate; }
.hx-phero .lead { margin: 0 auto 34px; max-width: 680px; }

.hx-device-stage { margin-top: clamp(40px, 6vh, 72px); padding: clamp(26px, 5vw, 76px) clamp(14px, 7vw, 120px); perspective: 1700px; }
.hx-device {
  position: relative; z-index: 1; max-width: 980px; margin-inline: auto; overflow: hidden;
  border-radius: 18px; background: var(--white); border: 2px solid #0b1a3a;
  box-shadow: 10px 10px 0 rgba(0, 10, 28, .6), 0 50px 90px rgba(0, 8, 36, .45);
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--tt, 1)) * 14deg)) scale(calc(.93 + var(--tt, 1) * .07));
}
.hx-device__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #e9eef7; border-bottom: 2px solid #0b1a3a; }
.hx-device__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff6b6b; }
.hx-device__bar i:nth-child(2) { background: #ffd166; }
.hx-device__bar i:nth-child(3) { background: #4cd7a0; }
.hx-device img { display: block; width: 100%; height: auto; background: var(--white); }
.hx-device--tall { max-width: 560px; }
.hx-device--photo { max-width: 1040px; padding: 9px; border-radius: 28px; }
.hx-device--photo img { border-radius: 20px; }
.hx-device-stage .hx-chip { z-index: 2; }
/* keep the chips in the stage's side margins so they never sit on the screenshot */
.hx-device-stage .hx-chip--1 { --x: 1.2%; --y: 9%; }
.hx-device-stage .hx-chip--2 { --x: calc(98.8% - 80px); --y: 5%; }
.hx-device-stage .hx-chip--3 { --x: 1.8%; --y: 56%; }
.hx-device-stage .hx-chip--4 { --x: calc(98.2% - 80px); --y: 62%; }
@media (max-width: 1180px) { .hx-device-stage .hx-chip { display: none; } }

.hx-features { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.hx-features .wrap--narrow { width: min(100% - 2 * var(--gutter), 1040px); }
.hx-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.hx-fgrid .hx-vcard { grid-column: auto; padding: 36px 34px 40px; }
.hx-fgrid > :nth-child(even) { margin-top: 44px; }
.hx-fgrid .hx-vcard h3 { font-size: 23px; }
.hx-fgrid .hx-vcard p { font-size: 16px; line-height: 1.65; }
@media (max-width: 760px) { .hx-fgrid { grid-template-columns: 1fr; } .hx-fgrid > :nth-child(even) { margin-top: 0; } }

/* ---------- About Us ---------- */

.hx-tsec { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0 calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.hx-tsec .section__head h2 { max-width: 820px; margin-inline: auto; }
.fx .timeline::before { transform-origin: 50% 0; transform: translateX(-1px) scaleY(var(--tp, 1)); }
.fx .tl::before { transition: scale .6s var(--hx-spring), background-color .4s, box-shadow .4s; }
.js .tl:not(.is-on)::before { scale: .45; background: #334055; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06); }
.js .tl.is-on::before { box-shadow: 0 0 0 9px rgba(0, 153, 255, .3); }
.fx .tl h3 { letter-spacing: -.02em; }
.fx .tl__img img { transition: transform .6s var(--hx-spring); }
.fx .tl:hover .tl__img img { transform: rotate(1deg) scale(1.04); }
.hx-tsec .tl__img { --hx-extra: transform .3s; }

.hx-fsec { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.fx .founders { gap: 28px; }
.fx .founder { --hx-extra: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease); background: var(--white); border: 2px solid var(--ink); border-radius: 30px; padding: 34px; box-shadow: 0 0 0 var(--blue-300); transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease); }
.fx .founder:hover { transform: translate(-5px, -5px); box-shadow: 10px 10px 0 var(--blue-300); }
.fx .founder img { border: 2px solid var(--ink); border-radius: 22px; background: linear-gradient(135deg, #e8f1ff, #cfe0ff); box-shadow: 4px 4px 0 var(--ink); transition: rotate .5s var(--hx-spring); }
.fx .founder:hover img { rotate: -2.5deg; }
.fx .founder h3 { letter-spacing: -.02em; }

.hx-vsec { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.fx .culture__item { --hx-extra: transform .4s var(--hx-ease), border-color .3s, background-color .3s; border-radius: 26px; padding: 30px 26px 32px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .14); }
.fx .culture__item:hover { transform: translateY(-8px); border-color: rgba(31, 120, 255, .85); background: rgba(31, 120, 255, .12); }
.fx .culture__item .badge-icon { width: 58px; height: 58px; border-radius: 17px; background: var(--white); border: 2px solid #0b1a3a; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); transition: rotate .45s var(--hx-spring); }
.fx .culture__item:hover .badge-icon { rotate: -9deg; }
.fx .culture__item:hover > img { transform: scale(1.12) rotate(-6deg); }
.fx .culture__item > img { transition: transform .45s var(--hx-spring); }

/* ---------- Careers ---------- */
.hx-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.hx-cards3 .hx-vcard { grid-column: auto; padding: 36px 30px 38px; }
.hx-cards3 > :nth-child(2) { margin-top: 40px; }
@media (max-width: 860px) { .hx-cards3 { grid-template-columns: 1fr; } .hx-cards3 > :nth-child(2) { margin-top: 0; } }

.hx-ssec { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.hx-csec { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0 calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.fx .culture { border: 2px solid rgba(255, 255, 255, .18); border-radius: 38px; }
.fx .culture__bg { transform: translate3d(0, var(--py, 0px), 0) scale(1.2); }
.fx .culture .culture__item > img { width: 48px; height: 48px; }

.hx-psec { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.fx .perk { --hx-extra: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease); border: 2px solid var(--ink); border-radius: 28px; padding: 34px 32px; box-shadow: 0 0 0 var(--blue-300); transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease); }
.fx .perk:hover { transform: translate(-5px, -5px); box-shadow: 9px 9px 0 var(--blue-300); }
.fx .perk h3 { letter-spacing: -.02em; }
.fx .perk img { transition: transform .5s var(--hx-spring); }
.fx .perk:hover img { transform: translateY(-8px) rotate(-4deg) scale(1.05); }

.hx-vosec { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0 calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.fx .voice { --hx-extra: transform .4s var(--hx-ease), border-color .3s, background-color .3s; border-radius: 24px; padding: 26px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .14); }
.fx .voice:hover { transform: translateY(-6px); border-color: rgba(31, 120, 255, .85); background: rgba(31, 120, 255, .1); }
.fx .voice img { border: 2px solid var(--white); box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); transition: rotate .5s var(--hx-spring); }
.fx .voice:hover img { rotate: -8deg; }

.fx #employee-story { padding-top: 0; }
.fx .story-card { --hx-extra: transform .4s var(--hx-ease), box-shadow .4s var(--hx-ease); border: 2px solid rgba(255, 255, 255, .6); border-radius: 30px; transition: transform .4s var(--hx-ease), box-shadow .4s var(--hx-ease); }
.fx .story-card:hover { transform: translate(-4px, -6px); box-shadow: 9px 10px 0 var(--blue-300); }
.fx .story-card img { transition: transform .8s var(--hx-ease); }
.fx .story-card:hover img { transform: scale(1.08); }
.fx .story-card .more svg { transition: transform .3s var(--hx-ease); }
.fx .story-card:hover .more svg { transform: translate(3px, -3px); }

.fx .gallery { gap: 18px; }
.fx .gallery img { --hx-extra: transform .6s var(--hx-ease), border-color .3s; border: 2px solid rgba(255, 255, 255, .14); border-radius: 26px; }
.fx .gallery img:hover { transform: scale(1.025) rotate(-.5deg); border-color: rgba(31, 120, 255, .85); }

/* ---------- Contact Us ---------- */
.hx-hero--contact { padding-bottom: calc(var(--hx-sheet-r) + clamp(24px, 3vw, 40px)); }
.hx-hero--contact .hx-hero__head { max-width: 860px; }
.hx-hero--contact .hx-chip { width: clamp(46px, 5vw, 64px); }
.hx-hero--contact .hx-chip--1 { --x: -4%; --y: 6%; --r: -10deg; }
.hx-hero--contact .hx-chip--2 { --x: calc(104% - 64px); --y: 2%; --r: 9deg; }
.hx-hero--contact .hx-chip--3 { --x: calc(98% - 64px); --y: 78%; --r: -7deg; }
@media (max-width: 960px) { .hx-hero--contact .hx-chip { display: none; } }

.hx-consec { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 64px) 0 calc(clamp(64px, 8vw, 104px) + var(--hx-sheet-r)); }
.fx .contact { border: 2px solid var(--ink); border-radius: 34px; box-shadow: 12px 12px 0 var(--blue-300); }
.fx .contact__info > p { font-size: 16px; line-height: 1.65; }
.fx .contact__item { --hx-extra: transform .3s var(--hx-ease); }
.fx .contact__item h2 img { width: 38px; height: 38px; padding: 9px; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); transition: rotate .4s var(--hx-spring); }
.fx .contact__item:hover h2 img { rotate: -10deg; }
.fx .contact__item h2 { gap: 12px; }
.fx .field input, .fx .field select, .fx .field textarea { border: 2px solid var(--ink); border-radius: 12px; box-shadow: none; transition: border-color .2s, box-shadow .25s var(--hx-ease), transform .25s var(--hx-ease); }
.fx .field input:focus, .fx .field select:focus, .fx .field textarea:focus { border-color: var(--ink); box-shadow: 5px 5px 0 var(--blue-300); transform: translate(-2px, -2px); }
.fx .field label { font-size: 14px; }
.fx .form .hx-btn { margin-top: 6px; }

.hx-faqsec { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.fx .faq details { --hx-extra: transform .3s var(--hx-ease), box-shadow .35s var(--hx-ease), border-color .3s; background: var(--white); border: 2px solid var(--ink); border-radius: 22px; margin-bottom: 16px; padding: 0 28px; transition: box-shadow .35s var(--hx-ease), transform .3s var(--hx-ease); }
.fx .faq details:hover { transform: translateX(4px); }
.fx .faq details[open] { box-shadow: 8px 8px 0 var(--blue-300); }
.fx .faq summary { color: var(--ink); font: 500 clamp(16px, 1.5vw, 19px)/1.4 var(--font-head); padding: 24px 0; align-items: center; }
.fx .faq summary svg { width: 34px; height: 34px; padding: 9px; margin: 0; border: 2px solid var(--ink); border-radius: 50%; transition: transform .4s var(--hx-spring), background-color .25s, color .25s; }
.fx .faq details[open] summary svg { background: var(--ink); color: var(--white); }
.fx .faq details p { color: var(--slate); font-size: 16px; line-height: 1.7; }
.fx .faq details[open] p { animation: hxOpen .55s var(--hx-ease); }
@keyframes hxOpen { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-brand span, .fx .faq details[open] p { animation: none; }
  .hx-device { transform: none; }
  .fx .timeline::before { transform: translateX(-1px); }
  .js .tl:not(.is-on)::before { scale: 1; background: var(--white); box-shadow: 0 0 0 6px rgba(0, 153, 255, .25); }
}


/* Auto Fulfill's text tile: site.css paints every brand chip white, which hid the white "AF" letters */
.fx .hx-brand .app-icon--text { width: 60px; height: 60px; padding: 0; border-radius: 16px; background: linear-gradient(135deg, #1f78ff, #0657d0); color: var(--white); font-size: 20px; justify-content: center; }

/* About hero: the illustration is full-bleed (the hand runs off its bottom edge), so it sits
   entirely inside the frame on the bottom edge, never overflowing; chips live in the side margins */
.hx-stage--art { overflow: hidden; border-radius: 34px; padding-top: clamp(28px, 4vw, 52px); }
.hx-art { position: relative; z-index: 1; display: block; width: min(72%, 860px); height: auto; margin: 0 auto; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(0, 8, 36, .45)); }
.hx-stage--art .hx-chip--1 { --x: 3%; --y: 12%; }
.hx-stage--art .hx-chip--2 { --x: calc(97% - 80px); --y: 9%; }
.hx-stage--art .hx-chip--3 { --x: 4%; --y: 58%; }
.hx-stage--art .hx-chip--4 { --x: calc(96% - 80px); --y: 62%; }
@media (max-width: 1100px) { .hx-stage--art .hx-chip { display: none; } .hx-art { width: 90%; } }
@media (max-width: 860px) { .hx-stage--art { border-radius: 26px; } }

/* ---------- About: minimal hero ---------- */
.hx-stage--min { position: relative; margin-top: clamp(28px, 4vh, 56px); display: grid; place-items: center; }
.hx-stage--min::before { content: ''; position: absolute; width: min(70%, 760px); aspect-ratio: 1.6; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 120, 255, .45), rgba(31, 120, 255, .12) 60%, transparent); filter: blur(30px); }
.hx-stage--min .hx-art { width: min(50%, 600px); filter: drop-shadow(0 30px 50px rgba(0, 8, 36, .5)); }
@media (max-width: 860px) { .hx-stage--min .hx-art { width: 94%; } }

/* ---------- About: core values as a split, typographic list ---------- */
.hx-vsplit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hx-vsplit__head { position: sticky; top: 120px; margin: 0; text-align: left; }
.hx-vsplit__head h2 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; }
.hx-vlist { border-top: 1px solid rgba(255, 255, 255, .16); }
.hx-vrow { --hx-extra: transform .3s; position: relative; isolation: isolate; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); padding: clamp(22px, 2.8vw, 36px) clamp(10px, 1.6vw, 24px); border-bottom: 1px solid rgba(255, 255, 255, .16); overflow: hidden; cursor: default; }
.hx-vrow::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(31, 120, 255, .22), rgba(31, 120, 255, .04)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--hx-ease); }
.hx-vrow:hover::before { transform: scaleX(1); }
.hx-vrow .badge-icon { flex: none; margin: 0; width: 64px; height: 64px; border-radius: 18px; background: var(--white); border: 2px solid #0b1a3a; box-shadow: 4px 4px 0 var(--amber); transition: rotate .5s var(--hx-spring), scale .5s var(--hx-spring); }
.hx-vrow:hover .badge-icon { rotate: -10deg; scale: 1.08; }
.hx-vrow p { font: 500 clamp(22px, 2.6vw, 36px)/1.2 var(--font-head); letter-spacing: -.02em; color: var(--white); transition: transform .5s var(--hx-ease), color .3s; }
.hx-vrow:hover p { transform: translateX(10px); color: #cfe3ff; }
@media (max-width: 860px) {
  .hx-vsplit { grid-template-columns: 1fr; }
  .hx-vsplit__head { position: static; text-align: center; }
  .hx-vrow .badge-icon { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .hx-vrow::before, .hx-vrow p, .hx-vrow .badge-icon { transition: none; } }