/* Purpose-made widget illustrations using the app's original mascot artwork. */
.widgets-section { --widget-gutter: clamp(24px, 5vw, 72px); background: #0d0d0f; color: #f5f5f7; padding: clamp(80px, 8vw, 130px) 0 clamp(80px, 8vw, 130px); overflow: hidden; }
.widgets-inner { width: calc(100% - var(--widget-gutter) * 2); max-width: 1440px; margin-inline: auto; }
.widgets-kicker { margin-bottom: 24px; color: #c4ef7c; font-size: 11px; line-height: 1.5; letter-spacing: .12em; }
.widgets-heading h2 { font-size: clamp(46px, 5vw, 76px); line-height: 1.08; letter-spacing: -.055em; }
.widgets-heading h2 span { color: #c4ef7c; }
.widgets-stage { position: relative; margin: 60px auto 42px; isolation: isolate; }
.widgets-stage:before { content: ''; position: absolute; inset: 6% -15% -4%; z-index: -1; background: radial-gradient(ellipse at center, #c4ef7c0b, transparent 65%); pointer-events: none; }
.widget-composition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.15fr); gap: 28px; margin-inline: auto; container-type: inline-size; }
.widget-preview { min-width: 0; }
.widget-preview-wide { grid-column: auto; }
.widget-preview figcaption { margin: 24px 8px 0; text-align: left; }
.widget-caption-label { margin-bottom: 10px; color: #c4ef7c; font-size: 12px; font-weight: 600; line-height: 1.5; }
.widget-preview h3 { max-width: 20ch; min-height: 2.36em; margin-bottom: 12px; font-size: 26px; font-weight: 650; line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
.widget-caption-description { color: #a1a1a6; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.widget-preview-wide figcaption { max-width: 540px; }
.widget-card { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 36px; border: 1px solid #ffffff22; box-shadow: 0 20px 50px #0005, inset 0 1px #ffffff0b; container-type: inline-size; font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.widget-top { position: absolute; z-index: 3; top: 8%; left: 8%; right: 8%; display: flex; align-items: center; justify-content: space-between; }
.widget-top>img { width: 8cqw; height: 8cqw; border-radius: 2cqw; }
.widget-top-symbol { display: grid; place-items: center; width: 12cqw; height: 12cqw; border-radius: 50%; background: #ffffff12; }
.widget-top-symbol .icon { width: 6cqw; height: 6cqw; color: #d7e7c7; }
.widget-vehicle { background: linear-gradient(140deg, #28372b, #142219); }
.widget-vehicle:before { content: ''; position: absolute; width: 145%; height: 65%; left: 15%; top: 30%; border: 1px solid #c4ef7c17; border-radius: 50%; transform: rotate(-27deg); }
.widget-vehicle-title { position: absolute; z-index: 3; top: 30%; left: 8%; }
.widget-vehicle-title>span { display: block; color: #abc29b; font-size: 3.1cqw; font-weight: 750; letter-spacing: .13em; margin-bottom: 2cqw; }
.widget-vehicle-title>strong { display: block; color: #f3f7ee; font-size: 10.5cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.045em; }
.widget-mascot { position: absolute; z-index: 1; width: 92%; height: auto; max-width: none; right: -13%; bottom: -6%; }
.widget-paper { position: absolute; z-index: 2; top: 46%; right: 7%; width: 24%; padding: 4cqw 3cqw; aspect-ratio: 1.4; border-radius: 2.5cqw; background: #f2f3e9; color: #253128; transform: rotate(7deg); box-shadow: 0 3cqw 6cqw #0004; }
.widget-paper>span { display: block; font-size: 2cqw; font-weight: 800; margin-bottom: 2cqw; }
.widget-paper>i { display: block; height: .65cqw; margin-top: 1.2cqw; border-radius: 1px; background: #38483533; }
.widget-paper>i:last-child { width: 40%; background: #719952; }
.widget-shortcut { position: absolute; z-index: 4; left: 8%; bottom: 8%; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; width: 84%; padding: 4cqw 5cqw; border-radius: 100px; background: #e2edda; color: #253128; font-size: 4.3cqw; font-weight: 750; line-height: 1.2; }
.widget-shortcut>span { font-size: 6cqw; line-height: 1; }
.widget-scanner { background: linear-gradient(140deg, #d4e9be, #b9d59b); color: #1a291b; }
.widget-scan-title { position: absolute; z-index: 2; left: 8%; top: 29%; font-size: 11.5cqw; font-weight: 850; line-height: .98; letter-spacing: -.05em; }
.widget-scan-phone { position: absolute; right: 9%; top: 22%; width: 31%; aspect-ratio: .54; padding: 10% 7% 7%; border-radius: 5cqw; background: #253c2b; transform: rotate(8deg); box-shadow: 0 3cqw 8cqw #2b402244; }
.widget-phone-speaker { position: absolute; width: 29%; height: 2%; left: 35.5%; top: 6%; border-radius: 10px; background: #90aa7b; }
.widget-scan-screen { position: absolute; display: grid; place-items: center; inset: 15% 10% 9%; border-radius: 2cqw; background: #f3f6e9; }
.widget-scan-screen>.icon { width: 14cqw; height: 14cqw; color: #739360; }
.widget-barcode { position: absolute; top: 44%; left: 27%; width: 46%; height: 16%; background: repeating-linear-gradient(to right, #253c2b 0 1px, transparent 1px 2px, #253c2b 2px 4px, transparent 4px 6px); }
.widget-scanner .widget-shortcut { background: #253c2b; color: #e4efd7; }
.widget-expiry { display: grid; grid-template-columns: .34fr .66fr; aspect-ratio: 2.15; background: linear-gradient(135deg, #29312b, #191f1b); }
.widget-expiry-art { position: relative; overflow: hidden; }
.widget-expiry-brand { position: absolute; z-index: 3; top: 9%; left: 20%; width: 4cqw; height: 4cqw; border-radius: 1cqw; }
.widget-days { position: absolute; z-index: 2; top: 10%; right: 5%; width: 12cqw; border-radius: 2cqw; background: #f2f1e8; color: #242b23; text-align: center; box-shadow: 0 1cqw 3cqw #0004; transform: rotate(-4deg); overflow: hidden; }
.widget-days>span { display: block; padding: 1.1cqw 0; background: #9cbe7c; color: #193021; font-size: 1.5cqw; font-weight: 800; letter-spacing: .12em; }
.widget-days>strong { display: block; padding: 1.3cqw 0 1.7cqw; font-size: 7cqw; line-height: 1; font-weight: 850; letter-spacing: -.05em; }
.widget-expiry-mascot { position: absolute; width: 128%; height: auto; max-width: none; left: -6%; bottom: -25%; }
.widget-expiry-content { position: relative; z-index: 3; padding: 4.5cqw 4.5cqw 4.5cqw 0; }
.widget-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.8cqw; font-size: 1.7cqw; line-height: 1; font-weight: 750; letter-spacing: .12em; color: #c4ef7c; }
.widget-status>span { display: grid; place-items: center; width: 4.3cqw; height: 4.3cqw; border-radius: 50%; background: #c4ef7c; color: #293724; }
.widget-status .icon { width: 2.5cqw; height: 2.5cqw; stroke-width: 2.2; }
.widget-expiry-title { display: block; font-size: 4.6cqw; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.widget-expiry-date { display: block; margin-top: 1cqw; font-size: 2.6cqw; font-weight: 650; line-height: 1.3; color: #b4d397; }
.widget-expiry-progress { height: 1.2cqw; margin: 1.8cqw 0 2cqw; background: #c4ef7c12; border-radius: 100px; }
.widget-expiry-progress>span { display: block; height: 100%; width: 34%; background: #c4ef7c; border-radius: inherit; }
.widget-next-document { display: flex; align-items: center; gap: 1.5cqw; padding: 1.6cqw; border: 1px solid #ffffff09; border-radius: 1.8cqw; background: #ffffff07; }
.widget-next-document>.icon { width: 3.7cqw; height: 3.7cqw; padding: .6cqw; border-radius: 1cqw; background: #c4ef7c12; color: #c4ef7c; }
.widget-next-document>div { min-width: 0; flex: 1; }
.widget-next-document strong { display: block; font-size: 2.45cqw; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.widget-next-document>div>span { display: block; margin-top: .5cqw; font-size: 1.95cqw; line-height: 1.25; color: #99aa92; }
.widget-next-document>span { font-size: 3cqw; color: #a1b994; }
.widgets-explanation { max-width: 590px; margin-inline: auto; text-align: center; color: #86868b; font-size: 14px; line-height: 1.75; }
@media (max-width: 1000px) {
  .widget-composition { grid-template-columns: 1fr; max-width: 530px; gap: 42px; }
  .widget-preview { width: 100%; max-width: 350px; margin-inline: auto; }
  .widget-preview-wide { max-width: none; }
  .widget-preview h3 { max-width: none; min-height: 0; }
}
@media (max-width: 700px) {
  .widgets-section { padding-block: 68px; }
  .widgets-kicker { font-size: 8px; margin-bottom: 20px; }
  .widgets-heading h2 { font-size: clamp(36px, 9vw, 52px); }
  .widgets-stage { margin: 42px auto 32px; }
  .widget-card { border-radius: clamp(17px, 5vw, 28px); }
  .widget-preview figcaption { margin: 20px 4px 0; }
  .widget-preview h3 { font-size: 23px; }
  .widget-caption-description { font-size: 15px; }
  .widgets-explanation { font-size: 13px; max-width: 35ch; }
}