/* iPhone apps page (/apps/ only). Shared pieces live in style.css: .phone, .care, .measurement, .service-price. */

/* Hero: the claim on the left; both apps on the right, standing on one baseline with end and centre ticks. */
.apps-hero{--g:clamp(28px,3.6vw,60px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,110px);align-items:end;padding-block:60px 100px}
.apps-hero h1{font-size:clamp(48px,5.6vw,96px);letter-spacing:-.07em;line-height:.98;margin:0 0 36px}
.apps-hero h1 span{display:block;text-wrap:balance}
.apps-hero h1 span+span{color:var(--muted)}
.apps-hero-copy>p:not(.eyebrow){font-size:15px;max-width:420px;margin-bottom:34px}
.apps-hero-figure{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);max-width:560px;padding:8px 10px 0;justify-self:end;width:100%}
.apps-hero-app{display:block;min-width:0}
.apps-hero-app .phone{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.apps-hero-app:hover .phone,.apps-hero-app:focus-visible .phone{transform:translateY(-8px)}
.apps-hero-caption{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:26px calc(var(--g) / -2) 0;padding:14px calc(var(--g) / 2) 0;border-top:1px solid var(--ink);font-size:10px}
.apps-hero-app:first-child .apps-hero-caption{margin-left:-10px;padding-left:10px}
.apps-hero-app:last-child .apps-hero-caption{margin-right:-10px;padding-right:10px}
.apps-hero-caption:before,.apps-hero-app:last-child .apps-hero-caption:after{content:'';position:absolute;top:-5px;left:0;height:9px;border-left:1px solid var(--ink)}
.apps-hero-app:last-child .apps-hero-caption:after{left:auto;right:0}
.apps-hero-caption>:first-child{color:var(--muted);grid-row:span 2}
.apps-hero-name{font:500 16px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.02em}

.status{display:inline-flex;align-items:center;gap:8px}
.status:before{content:'';width:7px;height:7px;border:1px solid currentColor;border-radius:50%;flex:none}
.status.is-live:before{background:currentColor}

/* One story per app. Screens share one column width so both apps read at the same scale. */
.app-story{padding-block:100px 95px;border-top:1px solid var(--line)}
.app-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(260px,.75fr);gap:0 26px;align-items:start;margin-bottom:64px}
.app-index{font-size:12px;color:var(--muted);padding-top:14px;min-width:3ch}
.app-icon{width:64px;height:64px;border-radius:22.5%;margin-top:6px;box-shadow:0 0 0 1px #00000014}
.app-title h2{font-size:clamp(46px,6vw,92px);margin-bottom:14px}
.app-title p{font-size:clamp(19px,1.6vw,24px);line-height:1.35;max-width:520px;margin:0}
.app-spec{margin:10px 0 0;border-top:1px solid var(--line);font-size:11px}
.app-spec div{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.app-spec dt{color:var(--muted)}
.app-spec dd{margin:0}

.app-screens,.app-flow ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);align-items:end;max-width:1180px}
.app-screens figure,.app-flow{margin:0}
.app-flow ol{list-style:none;margin:0 auto 0 0;padding:0}
.phone-caption{display:flex;gap:12px;margin-top:22px;padding-top:11px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.phone-caption span{color:var(--ink)}
.app-widgets>div{display:grid;gap:14px}
.app-widgets img{width:100%;border-radius:20px;box-shadow:0 0 0 1px var(--line)}
.app-measure{max-width:1180px;margin-top:34px;font-size:11px;gap:16px}
.app-measure:before,.app-measure:after{height:11px}

/* Release record: one tick per day from 1.0 to today. The blue bracket measures launch to 2.0. */
.release{margin:84px 0 0}
.release-head{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);margin-bottom:30px;max-width:1180px}
.release-chart,.release-legend{max-width:1180px}
.release-chart{position:relative;height:82px;margin-right:1px}
.release-axis{position:absolute;inset:36px 0 auto;height:8px;border-top:1px solid var(--ink);background:linear-gradient(90deg,#bdbdbd 1px,#0000 1px) 0 0/calc(100% / var(--days) * var(--tick)) 100% repeat-x;transform-origin:left}
.release-mark{position:absolute;top:26px;left:calc(var(--at) / var(--days) * 100%);width:1px;height:28px;background:var(--ink)}
.release-mark span{position:absolute;top:36px;left:-1px;font-size:10px;white-space:nowrap}
.release-now{background:var(--blue)}
.release-now span{left:auto;right:0;color:var(--blue)}
.release-mark.is-late span{top:-16px;left:auto;right:-1px}
.release-gap{position:absolute;top:2px;left:0;width:calc(var(--at) / var(--days) * 100%);height:11px;border-inline:1px solid var(--blue);background:linear-gradient(var(--blue),var(--blue)) 0 50%/100% 1px no-repeat}
.release-gap span{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11px;color:var(--blue)}
.release-legend{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0 32px;margin:26px 0 0;padding:0;font-size:11px}
.release-legend li{display:grid;grid-template-columns:52px 1fr;gap:3px 8px;padding-top:14px;border-top:1px solid var(--line)}
.release-legend li>:first-child{grid-row:span 2}
.release-legend time{color:var(--muted)}
.release-legend li>:last-child{grid-column:2}
.release-live strong{font-weight:400;color:var(--blue)}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
.release-axis,.release-gap{animation:release-draw linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
.release-mark{animation:release-mark linear both;animation-timeline:view();animation-range:entry 30% cover 45%}}}
@keyframes release-draw{from{transform:scaleX(0)}}
@keyframes release-mark{from{opacity:0;transform:translateY(6px)}}
.release-gap{transform-origin:left}

.app-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,60px);margin-top:84px}
.app-text section{border-top:1px solid var(--ink);padding-top:22px}
.app-text .eyebrow{color:var(--muted);margin-bottom:16px}
.app-text p:not(.eyebrow){font-size:15px;max-width:440px;margin:0}

.app-foot{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:60px}
.app-facts{display:grid;grid-template-columns:repeat(4,minmax(0,210px));gap:28px;margin:0}
.app-facts div{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;border-top:1px solid var(--line);padding-top:18px}
.app-facts div:before{content:'';position:absolute;left:0;top:-5px;height:9px;border-left:1px solid var(--ink)}
.app-facts dd{margin:0 0 12px;font-size:clamp(26px,2.5vw,36px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.app-facts dt{font-size:12px;line-height:1.5;color:var(--muted)}
.app-links{display:flex;flex-direction:column;align-items:flex-end;margin:0;flex:none}

/* Black punctuation: the honest answer. */
.apps-fit{background:var(--ink);color:#fff}
.apps-fit h2{font-size:clamp(40px,5.4vw,84px);max-width:1100px}
.apps-fit .eyebrow{color:#ccc}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.fit-grid h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.04em;padding-bottom:18px;border-bottom:1px solid #555}
.fit-grid ul{list-style:none;padding:0;margin:0}
.fit-grid li{display:grid;grid-template-columns:30px 1fr;padding:14px 0;border-bottom:1px solid #333;font-size:15px;color:#ddd}
.fit-grid li:before{content:'+';font-family:var(--mono);color:#fff}
.fit-no li:before{content:'−'}
.fit-note{margin:56px 0 0;font-size:clamp(20px,1.8vw,26px);line-height:1.4;letter-spacing:-.02em;max-width:780px}
.apps-fit :focus-visible{outline-color:#a8bdff}

.apps-offer{background:var(--surface)}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.apps-offer h2{font-size:clamp(40px,4.6vw,68px)}
.offer-list{list-style:none;padding:0;margin:0 0 8px;border-bottom:1px solid var(--line)}
.offer-list li{font-size:14px;border-top:1px solid var(--line);padding:12px 0}
.offer-list li:before{content:'+';font-family:var(--mono);margin-right:14px}

@media(min-width:701px){.apps-hero-copy{animation:hero-enter .8s cubic-bezier(.2,.7,.2,1) both}
.apps-hero-app{animation:hero-enter 1s cubic-bezier(.2,.7,.2,1) .12s both}
.apps-hero-app+.apps-hero-app{animation-delay:.22s}}

@media(max-width:1000px){.apps-hero{grid-template-columns:1fr;padding-bottom:80px}
.apps-hero-figure{justify-self:start;max-width:480px}
.app-head{grid-template-columns:auto auto minmax(0,1fr);row-gap:28px}
.app-spec{grid-column:3}
.app-screens,.app-flow ol{gap:22px}
.release-legend{grid-template-columns:1fr 1fr}
.app-text{grid-template-columns:1fr 1fr}
.app-text section:last-child{grid-column:span 2}
.app-foot{flex-direction:column;align-items:flex-start}
.app-facts{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.app-links{align-items:flex-start}
.fit-grid,.offer-grid{gap:45px}}

@media(max-width:700px){.apps-hero{padding-block:34px 60px;gap:44px}
.apps-hero h1{font-size:clamp(44px,12vw,64px);margin-bottom:26px}
.apps-hero-copy>p:not(.eyebrow){font-size:14px}
.apps-hero-figure{--g:24px;padding-inline:10px}
.apps-hero-name{font-size:14px}
.apps-hero-caption{grid-template-columns:1fr}
.apps-hero-caption>:first-child{display:none}
.app-story{padding-block:64px}
.app-head{grid-template-columns:auto minmax(0,1fr);gap:18px;margin-bottom:40px}
.app-index{display:none}
.app-icon{width:52px;height:52px;margin-top:4px}
.app-title h2{font-size:46px;margin-bottom:10px}
.app-title p{font-size:19px}
.app-spec{grid-column:1/-1;margin:0}
/* Screens become a swipeable row, as selected work does on the home page. */
.app-screens,.app-flow ol{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:26px;padding:8px var(--gutter) 16px;scrollbar-width:thin}
.app-flow ol{margin-inline:calc(-1 * var(--gutter))}
.app-screens>figure,.app-flow li{flex:0 0 58vw;max-width:260px;scroll-snap-align:start}
.app-screens>.app-widgets{flex-basis:48vw}
.app-measure{margin-top:18px;font-size:10px}
.release{margin-top:56px}
.release-legend{grid-template-columns:1fr;gap:0}
.release-legend li{padding-block:10px}
.release-gap span{font-size:10px}
.app-text{grid-template-columns:1fr;gap:28px;margin-top:56px}
.app-text section:last-child{grid-column:auto}
.app-facts{gap:24px 18px}
.app-facts dd{font-size:28px}
.fit-grid,.offer-grid{grid-template-columns:1fr;gap:40px}
.fit-grid li{font-size:14px}
.fit-note{margin-top:40px;font-size:20px}}