.problems{background:var(--surface-page);color:var(--text-on-page);color-scheme:light;--focus:var(--focus-on-page);padding-block:var(--space-3xl)}.problems__head{max-width:40rem}.problems__title{font-family:var(--font-serif);letter-spacing:-.015em;text-wrap:balance;margin-top:0;font-size:clamp(2rem,1.3rem + 2.8vw,3.5rem);font-weight:400;line-height:1.08}.problems__grid{margin-top:var(--space-2xl);grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.875rem,.5rem + 1vw,1.25rem);display:grid}.problem--stark{--p-bg:var(--stark-bg);--p-ink:var(--stark-navy);--p-accent:var(--stark-orange)}.problem--tastepad{--p-bg:var(--tastepad-porcelain);--p-ink:var(--tastepad-ink);--p-accent:var(--tastepad-cobalt)}.problem--yanufi{--p-bg:var(--yanufi-bg);--p-ink:var(--yanufi-cream);--p-accent:var(--yanufi-gradient-end)}.problem--nota{--p-bg:var(--nota-paper);--p-ink:var(--nota-ink);--p-accent:var(--nota-owed)}.problem[data-scheme=dark]{color-scheme:dark}.problem{display:flex}.problem__card{--pad:clamp(1.5rem, 1rem + 1.2vw, 2rem);--focus:var(--p-accent);align-items:center;gap:var(--pad);width:100%;padding:var(--pad);background:var(--p-bg);color:var(--p-ink);isolation:isolate;box-shadow:0 1px 0 color-mix(in oklch, var(--navy) 8%, transparent);transition:transform .5s var(--ease-out-strong), box-shadow .5s var(--ease-out-strong);border-radius:1.5rem;grid-template-columns:minmax(0,1fr) minmax(9rem,38%);text-decoration:none;display:grid;position:relative;overflow:hidden}.problem__card:before{content:"";z-index:-1;aspect-ratio:1;background:radial-gradient(closest-side, color-mix(in oklch, var(--p-accent) 18%, transparent), transparent);border-radius:50%;width:75%;position:absolute;top:50%;right:-15%;translate:0 -50%}.problem__text{gap:var(--space-s);flex-direction:column;display:flex}.problem__question{font-family:var(--font-serif);letter-spacing:-.01em;text-wrap:balance;font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);font-weight:400;line-height:1.15}.problem__answer{font-size:var(--step-small);opacity:.75;text-wrap:pretty;line-height:1.55}.problem__app{margin-top:var(--space-2xs);letter-spacing:-.01em;align-items:center;gap:.5rem;font-weight:700;display:flex}.problem__icon{border-radius:23%;width:1.75rem;height:1.75rem;box-shadow:0 .25rem .75rem -.25rem oklch(15% .03 250/.4)}.problem__badge{background:color-mix(in oklch, var(--p-accent) 14%, transparent);color:var(--p-accent);letter-spacing:0;border-radius:999px;padding:.2rem .55rem;font-size:.6875rem;font-weight:600}.problem__arrow{color:var(--p-accent);transition:transform .3s var(--ease-out-strong);margin-left:auto}.problem__media .device{width:100%;max-width:15rem;transition:transform .6s var(--ease-out-strong);margin-inline:auto}.problem--tastepad .device{aspect-ratio:1/2.17;border-radius:13.5%/6.2%;max-width:13.5rem}.problem--tastepad .device__screen{border-radius:11.6%/5.35%}@media (width<=899px){.problems__grid{grid-template-columns:minmax(0,1fr)}}@media (width<=699px){.problems{padding-block:var(--space-2xl)}.problems__title{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.125rem)}.problems__grid{margin-top:var(--space-l);gap:.75rem}.problem__card{--pad:1.125rem;padding:var(--pad) var(--pad) 0;border-radius:1.25rem;grid-template-columns:minmax(0,1fr) 6.25rem;align-items:stretch;gap:1rem}.problem__text{padding-bottom:var(--pad);gap:.375rem}.problem__question{font-size:1.25rem;line-height:1.15}.problem__answer{font-size:.875rem;line-height:1.45}.problem__app{margin-top:auto;padding-top:.375rem;font-size:.9375rem}.problem__icon{width:1.5rem;height:1.5rem}.problem__arrow{display:none}.problem__media{min-height:9rem;position:relative;overflow:hidden}.problem__media .device{width:100%;max-width:none;margin:0;position:absolute;top:.125rem;left:0;-webkit-mask-image:linear-gradient(#000 50%,#0000 92%);mask-image:linear-gradient(#000 50%,#0000 92%)}}.problem__card:active{transform:scale(.985)}@media (hover:hover) and (pointer:fine){.problem__card:hover{transform:translateY(-4px);box-shadow:0 1.5rem 3rem -1.5rem oklch(15% .03 250/.35)}.problem__card:hover .problem__arrow{transform:translate(4px)}.problem__card:hover .problem__media .device{transform:translateY(-.375rem)rotate(-1.5deg)}}@media (prefers-reduced-motion:reduce){.problem__card,.problem__media .device{transition:none}}.tl{--ink-day:var(--navy);--ink-night:var(--cream);--rail:color-mix(in oklch, var(--navy) 16%, transparent);color:var(--ink-day);color-scheme:light;--focus:var(--focus-on-page);padding-block:var(--space-3xl) var(--space-2xl);background:linear-gradient(180deg, var(--surface-page) 0%, oklch(90% .05 80) 28%, oklch(84% .08 60) 50%, oklch(68% .08 30) 64%, oklch(42% .06 300) 80%, var(--surface-stage) 96%);position:relative;overflow:clip}.tl__head{text-align:center;max-width:40rem;margin-inline:auto}.tl__title{font-family:var(--font-serif);letter-spacing:-.015em;text-wrap:balance;margin-top:1.25rem;font-size:clamp(2rem,1.3rem + 2.8vw,3.5rem);font-weight:400;line-height:1.08}.tl__track{--p:0;--rail-x:50%;margin-top:var(--space-2xl);position:relative}.tl__rail{inset-block:0;left:var(--rail-x);background:var(--rail);border-radius:2px;width:2px;position:absolute;translate:-50%}.tl__fill{height:calc(var(--p) * 100%);border-radius:inherit;background:linear-gradient(180deg, oklch(80% .15 75), var(--copper), oklch(70% .06 300), var(--cream));background-size:100% calc(100% / max(var(--p), .001));position:absolute;inset:0 0 auto}.tl__orb{top:calc(var(--p) * 100%);aspect-ratio:1;z-index:2;width:3.25rem;position:absolute;left:50%;translate:-50% -50%}.tl__sun,.tl__moon{border-radius:50%;position:absolute;inset:0}.tl__sun{opacity:clamp(0, calc((.78 - var(--p)) * 8), 1);rotate:calc(var(--p) * 240deg);background:radial-gradient(circle,oklch(92% .14 95) 0 38%,#0000 39%);box-shadow:0 0 2.5rem .5rem oklch(85% .15 80/.55)}.tl__sun:before{content:"";background:repeating-conic-gradient(oklch(82% .15 70) 0 8deg, transparent 8deg 30deg);border-radius:50%;position:absolute;inset:-.5rem;mask:radial-gradient(circle,#0000 0 52%,#000 53% 70%,#0000 71%)}.tl__moon{opacity:clamp(0, calc((var(--p) - .72) * 8), 1);background:var(--cream);inset:.6rem;box-shadow:inset -.55rem -.2rem oklch(80% .03 80),0 0 2rem .25rem oklch(95% .03 85/.35)}.tl__list{display:grid}.tl-moment{grid-template-columns:minmax(0,1fr) 7rem minmax(0,1fr);grid-template-areas:"text time media";align-items:center;padding-block:clamp(3rem,2rem + 5vw,6.5rem);display:grid}.tl-moment--flip{grid-template-areas:"media time text"}.tl-moment--night{color:var(--ink-night);color-scheme:dark;--focus:var(--focus-on-stage)}.tl-moment__time{z-index:3;grid-area:time;justify-self:center;position:relative}.tl-moment__time time{background:var(--navy);color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:.02em;border-radius:999px;padding:.35rem .8rem;font-size:.875rem;font-weight:700;display:inline-block;box-shadow:0 .5rem 1.25rem -.5rem oklch(15% .03 250/.5)}.tl-moment--night .tl-moment__time time{background:var(--cream);color:var(--navy)}.tl-moment__text{text-align:right;grid-area:text;justify-self:end;max-width:26rem}.tl-moment--flip .tl-moment__text{text-align:left;justify-self:start}.tl-moment__when{letter-spacing:.14em;text-transform:uppercase;opacity:.65;font-size:.75rem;font-weight:600}.tl-moment__scene{font-family:var(--font-serif);letter-spacing:-.01em;text-wrap:balance;margin-top:.75rem;font-size:clamp(1.625rem,1.2rem + 1.6vw,2.5rem);font-weight:400;line-height:1.12}.tl-moment__desc{margin-top:var(--space-s);font-size:var(--step-body);opacity:.8;text-wrap:pretty;line-height:1.55}.tl-moment__app{margin-top:var(--space-l);background:color-mix(in oklch, currentColor 9%, transparent);color:inherit;transition:background-color var(--dur-hover) ease;border-radius:999px;align-items:center;gap:.5rem;padding:.375rem .875rem .375rem .375rem;font-weight:700;text-decoration:none;display:inline-flex}.tl-moment__app img{border-radius:23%;width:1.75rem;height:1.75rem}.tl-moment__badge{opacity:.7;font-size:.6875rem;font-weight:600}.tl-moment__arrow{transition:transform .26s var(--ease-out-strong)}@media (hover:hover) and (pointer:fine){.tl-moment__app:hover{background:color-mix(in oklch, currentColor 15%, transparent)}.tl-moment__app:hover .tl-moment__arrow{transform:translate(3px)}}.tl-moment__media{grid-area:media;justify-self:start;width:min(100%,15rem);position:relative}.tl-moment--flip .tl-moment__media{justify-self:end}.tl-moment__media .device{rotate:3deg}.tl-moment--flip .tl-moment__media .device{rotate:-3deg}.tl-moment--tastepad .device{aspect-ratio:1/2.17;border-radius:13.5%/6.2%}.tl-moment--tastepad .device__screen{border-radius:11.6%/5.35%}.tl-moment__sticker{background:var(--st-bg,var(--cream));color:var(--st-ink,var(--navy));white-space:nowrap;border-radius:.75rem;padding:.5rem .9rem;font-size:.9375rem;font-weight:700;position:absolute;top:14%;right:-1.5rem;rotate:8deg;box-shadow:0 .75rem 1.5rem -.5rem oklch(15% .03 250/.45)}.tl-moment--flip .tl-moment__sticker{left:-1.5rem;right:auto;rotate:-7deg}.tl-moment--stark{--st-bg:var(--stark-orange);--st-ink:#fff}.tl-moment--nota{--st-bg:var(--nota-raised);--st-ink:var(--nota-owed)}.tl-moment--tastepad{--st-bg:var(--tastepad-cobalt);--st-ink:#fff}.tl-moment--yanufi{--st-bg:var(--yanufi-cream);--st-ink:var(--yanufi-bg)}.tl__end{margin-top:var(--space-l);text-align:center;color:var(--ink-night);font-family:var(--font-serif);font-style:italic;font-size:var(--step-lead)}@media (prefers-reduced-motion:no-preference){.tl.is-ready .tl-moment__text,.tl.is-ready .tl-moment__media .device,.tl.is-ready .tl-moment__sticker,.tl.is-ready .tl-moment__time time{transition:opacity .7s var(--ease-out-strong), transform .8s cubic-bezier(.34, 1.56, .64, 1), scale .5s cubic-bezier(.34, 1.56, .64, 1)}.tl.is-ready .tl-moment:not(.is-active) .tl-moment__text{opacity:.25;transform:translateY(1.5rem)}.tl.is-ready .tl-moment:not(.is-active) .tl-moment__media .device{opacity:.3;transform:translateY(3rem)rotate(6deg)}.tl.is-ready .tl-moment:not(.is-active) .tl-moment__sticker{opacity:0;scale:.4}.tl.is-ready .tl-moment:not(.is-active) .tl-moment__time time{opacity:.6;scale:.85}.tl.is-ready .tl-moment.is-active .tl-moment__sticker{transition-delay:.25s}}@media (width<=799px){.tl__track{--rail-x:1.25rem}.tl__orb{width:2.5rem}.tl-moment,.tl-moment--flip{align-items:start;column-gap:var(--space-m);row-gap:var(--space-xl);grid-template-columns:2.5rem minmax(0,1fr);grid-template-areas:"time text"".media"}.tl-moment__time{justify-self:start;margin-left:-.25rem}.tl-moment__time time{padding:.3rem .5rem;font-size:.75rem}.tl-moment__text,.tl-moment--flip .tl-moment__text{text-align:left;justify-self:start}.tl-moment__media,.tl-moment--flip .tl-moment__media{justify-self:center;width:min(55vw,13rem)}.tl-moment__sticker,.tl-moment--flip .tl-moment__sticker{left:auto;right:-1rem}}