/* V102 | Cetelem: one intentional signature scene within the documented Apple journey.
   No recoloring of source screenshots. The diagram is aria-hidden and redundant
   to the normal-flow explanation. Without JS / reduced motion the flow remains complete. */
.c102-design-chapter{display:block!important;min-height:0!important;padding-top:clamp(60px,7vw,110px)!important;padding-bottom:clamp(60px,7vw,110px)!important;overflow:visible;isolation:isolate}
.c102-design-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.83fr);gap:clamp(26px,5vw,84px);align-items:center;margin-bottom:clamp(35px,6vw,72px)}
.c102-design-head .c100-copy{max-width:610px}
.c102-design-principle{min-width:0;border:1px solid #cad8c9;border-radius:22px;background:linear-gradient(135deg,#fff,#f5faf3);padding:clamp(24px,3.2vw,45px);box-shadow:0 20px 55px -48px #24543c66}
.c102-design-number{display:block;font:700 11px/1.5 var(--sans,Arial,sans-serif);letter-spacing:.16em;color:#387a4e;margin-bottom:16px}
.c102-design-principle strong{display:block;font:400 clamp(28px,3vw,43px)/1.16 var(--serif,Georgia,serif);letter-spacing:-.035em;color:#1e4830}
.c102-design-principle p{font:400 15px/1.6 var(--sans,Arial,sans-serif);margin:15px 0 0;color:#526752;max-width:43ch}
.c102-motion-instruction{font:400 12px/1.5 var(--sans,Arial,sans-serif);color:#55705a;margin:24px 0 0;max-width:48ch}
.c102-motion-shell{position:relative;margin:0 max(-1px,calc(-1*clamp(20px,5.2vw,100px))) clamp(28px,5vw,62px)}
.c102-motion-track{display:none;position:relative;height:355svh;contain:layout style}
.c102-motion-shell[data-c102-enabled="true"] .c102-motion-track{display:block}
.c102-motion-sticky{position:sticky;top:var(--gn88-story-top,131px);height:calc(100svh - var(--gn88-story-top,131px));min-height:430px;max-height:990px;border:1px solid #cddbc9;border-radius:24px;overflow:hidden;background:#f2f6f0;color:#1c472e;isolation:isolate;box-shadow:0 20px 55px -40px #22482b50}
.c102-motion-sticky:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#67846c0d 1px,transparent 1px),linear-gradient(0deg,#67846c0d 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}
.c102-motion-heading{position:absolute;z-index:5;top:clamp(18px,3vh,38px);left:clamp(20px,4vw,70px);right:clamp(20px,4vw,70px);display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid #d5e1d3;padding-bottom:16px}
.c102-motion-eyebrow{font:750 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.16em;color:#377349}
.c102-motion-heading strong{font:400 clamp(15px,1.45vw,21px)/1.3 var(--serif,Georgia,serif);letter-spacing:-.02em;color:#32543a;text-align:right}
.c102-motion-canvas{position:absolute;inset:clamp(72px,10vh,112px) clamp(16px,3vw,45px) 58px;display:block;z-index:2}
.c102-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.c102-frame--notes{background:transparent;display:flex;flex-direction:column}
.c102-board-caption{color:#527258;font:750 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.15em;margin-bottom:clamp(20px,4vh,45px)}
.c102-notes{width:100%;max-width:900px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);align-items:stretch}
.c102-note{border:1px solid #cddbc9;border-top:5px solid #73a97c;background:#fff;box-shadow:0 14px 35px -29px #183e2990;border-radius:12px;padding:clamp(17px,2vw,32px);display:flex;flex-direction:column;gap:15px;min-height:185px;transform:rotate(0);position:relative}
.c102-note:nth-child(2){border-top-color:#3f9256;transform:translateY(13px)}
.c102-note:nth-child(3){border-top-color:#bed6b5;transform:translateY(-7px)}
.c102-note span{color:#317148;font:700 10px/1.3 var(--sans,Arial,sans-serif);letter-spacing:.14em}
.c102-note strong{font:500 clamp(20px,2vw,30px)/1.23 var(--sans,Arial,sans-serif);letter-spacing:-.04em;color:#234c32}
.c102-note-marker{margin-top:auto;display:block;width:28px;height:2px;background:#aacdb0}
.c102-board-foot{margin-top:clamp(35px,5vh,58px);color:#567963;font:700 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.15em}
.c102-flow-map{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,25px);width:100%;max-width:1040px}
.c102-flow-card{flex:1;min-width:0;max-width:295px;min-height:288px;border:1px solid #cfddce;border-radius:16px;background:white;box-shadow:0 18px 45px -37px #2a4b3580;padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;justify-content:flex-start}
.c102-flow-card small{color:#3a7850;font:750 11px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.1em}
.c102-flow-card strong{font:550 clamp(15px,1.5vw,21px)/1.28 var(--sans,Arial,sans-serif);letter-spacing:-.025em;color:#244732;margin-top:auto}
.c102-flow-bars{display:flex;flex-direction:column;gap:13px;margin:40px 0}
.c102-flow-bars>*{height:11px;border-radius:4px;background:#e2eae0;width:80%;display:block}
.c102-flow-bars>b{width:66%;height:16px;background:#b8cfb5}
.c102-flow-bars>i:last-child{width:54%}
.c102-flow-arrow{flex:none;font-size:30px;color:#357d50}
.c102-editor{width:min(100%,1040px);height:min(100%,510px);min-height:300px;border:1px solid #cbd5d2;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px -44px #152e3065;display:flex;flex-direction:column}
.c102-editor-toolbar{height:46px;flex:none;padding:0 17px;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid #e3e8e6;color:#44584d;font:650 10px/1.3 var(--sans,Arial,sans-serif);letter-spacing:.08em}
.c102-editor-dot{color:#4d6a58;font-size:20px}
.c102-editor-export{margin-left:auto;font-size:10px;color:#75877e}
.c102-editor-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(136px,.23fr) minmax(0,1fr) minmax(148px,.21fr)}
.c102-editor-sidebar,.c102-editor-inspector{padding:18px 16px;background:#fafbfa;min-width:0;color:#415848;font-family:var(--sans,Arial,sans-serif)}
.c102-editor-sidebar{border-right:1px solid #e4e9e6}.c102-editor-inspector{border-left:1px solid #e4e9e6}
.c102-editor-sidebar small,.c102-editor-inspector small{display:block;color:#6a8571;font-size:10px;letter-spacing:.12em;margin-bottom:18px}
.c102-editor-sidebar>strong{font-size:12px;display:block;margin-bottom:18px}
.c102-editor-sidebar>span{font-size:11px;line-height:1.3;display:block;padding:12px 8px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c102-editor-sidebar .is-selected{background:#e6f0e5;color:#29633a}
.c102-editor-inspector p{font-size:12px;line-height:1.5;margin:12px 0 22px}
.c102-editor-prop{display:flex;justify-content:space-between;border-bottom:1px solid #e7ece8;padding:10px 0;font-size:11px}
.c102-editor-board{position:relative;min-width:0;overflow:hidden;background-color:#f0f1f1;background-image:linear-gradient(#e6e9e7 1px,transparent 1px),linear-gradient(90deg,#e6e9e7 1px,transparent 1px);background-size:28px 28px;display:flex;align-items:center;justify-content:center}
.c102-editor-sheet{width:min(50%,205px);height:82%;border:1px solid #d5ddd8;background:#fff;padding:20px;border-radius:8px;box-shadow:0 9px 32px #1d44301a;display:flex;flex-direction:column;gap:15px}
.c102-editor-sheet small{font:700 10px/1.3 var(--sans,Arial,sans-serif);color:#366848}
.c102-editor-line{height:11px;border-radius:4px;background:#e4ece4;max-width:100%}
.c102-editor-line.medium{height:18px;width:76%;background:#c8d8c8}.c102-editor-line.short{width:63%}
.c102-editor-choice{border:1px solid #70a27e;background:#f1f8f1;border-radius:6px;height:75px;display:flex;align-items:center;gap:10px;padding:15px}.c102-editor-choice span{color:#348052}.c102-editor-choice i{height:9px;width:60%;background:#aac9ac;border-radius:4px}
.c102-editor-button{height:28px;border-radius:5px;background:#2a7744;margin-top:auto}
.c102-product-frame{width:min(90%,1010px);margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.c102-product-frame>span{font:750 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.14em;color:#38704d}
.c102-product-frame img{width:100%;max-height:min(54svh,465px);object-fit:contain;border-radius:10px;border:1px solid #d3ded0;box-shadow:0 15px 40px -30px #284f37bb;background:#fff}
.c102-product-frame small{font:400 11px/1.4 var(--sans,Arial,sans-serif);color:#5e735f}
.c102-motion-footer{position:absolute;z-index:5;left:clamp(18px,4vw,70px);right:clamp(18px,4vw,70px);bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#477552}
.c102-motion-phase{font:700 11px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.03em}
.c102-motion-ticks{display:flex;gap:7px}
.c102-motion-ticks i{display:block;width:24px;height:3px;background:#c2d7c5;border-radius:5px}
.c102-motion-ticks i.is-current{background:#39794c}
.c102-motion-static{display:block;margin-top:16px;color:#416747;font-size:14px;line-height:1.5}
.c102-motion-static-kicker{margin:0 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.c102-motion-static p:last-child{margin:0}
.c102-motion-shell[data-c102-enabled="true"] .c102-motion-static{display:none}
.c102-original-source{margin-inline:auto;max-width:930px;padding-top:12px}
.c102-original-source .c100-art{transform:none;margin:0 auto}
.c102-original-source .c100-source img{display:block;max-width:100%}
.c102-design-chapter .c100-source-annotation{max-width:100%}
@media(max-width:800px){
 .c102-design-chapter{padding-top:42px!important;padding-bottom:54px!important}
 .c102-design-head{display:block;margin-bottom:27px}
 .c102-design-principle{margin-top:23px;padding:24px;border-radius:15px}
 .c102-design-principle strong{font-size:27px}
 .c102-motion-shell{margin-inline:-6px}
 .c102-motion-track{height:310svh}
 .c102-motion-sticky{top:var(--gn94-project-nav,54px);height:calc(100svh - var(--gn94-project-nav,54px));min-height:0;max-height:none;border-radius:14px}
 .c102-motion-heading{display:block;top:16px;left:18px;right:18px;padding-bottom:10px}
 .c102-motion-eyebrow{font-size:9px;display:block}
 .c102-motion-heading strong{display:block;font:400 16px/1.24 var(--serif,Georgia,serif);text-align:left;margin-top:5px}
 .c102-motion-canvas{inset:90px 14px 50px}
 .c102-notes{grid-template-columns:1fr;gap:12px;max-width:320px}
 .c102-note,.c102-note:nth-child(n){transform:none;min-height:85px;padding:13px 16px;border-top-width:3px;border-radius:8px;gap:6px}
 .c102-note span{font-size:9px}.c102-note strong{font-size:17px;line-height:1.22}.c102-note-marker{display:none}
 .c102-board-caption{font-size:9px;margin-bottom:15px}.c102-board-foot{font-size:8px;margin-top:17px}
 .c102-flow-map{display:flex;flex-direction:column;gap:2px;max-height:100%;justify-content:center}
 .c102-flow-card{width:100%;max-width:285px;flex:none;min-height:102px;padding:13px 17px;border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-content:center}
 .c102-flow-card small{font-size:9px;grid-column:1}.c102-flow-card strong{grid-column:1;font-size:15px;margin:0}
 .c102-flow-bars{grid-column:2;grid-row:1/3;gap:7px;margin:0;align-self:center;width:52px}
 .c102-flow-bars>*{height:5px}.c102-flow-bars>b{height:8px}.c102-flow-arrow{transform:rotate(90deg);font-size:19px;line-height:1}
 .c102-editor{height:min(100%,485px);min-height:285px;border-radius:9px}
 .c102-editor-toolbar{height:39px;font-size:8px;letter-spacing:.04em;padding-inline:10px}.c102-editor-dot{font-size:13px}
 .c102-editor-main{grid-template-columns:75px minmax(0,1fr)}
 .c102-editor-sidebar{padding:12px 6px}.c102-editor-sidebar strong{font-size:10px;margin:8px 0}.c102-editor-sidebar small{font-size:8px;margin-bottom:8px}
 .c102-editor-sidebar>span{font-size:8px;padding:10px 2px}
 .c102-editor-inspector{display:none}.c102-editor-sheet{width:65%;height:80%;padding:13px;gap:12px}
 .c102-product-frame{width:100%}.c102-product-frame>span{font-size:9px}.c102-product-frame img{width:100%;max-height:53svh}
 .c102-motion-footer{left:16px;right:16px;bottom:16px}.c102-motion-phase{font-size:9px}.c102-motion-ticks i{width:15px}
 .c102-original-source{padding-top:15px}
}
@media(max-height:620px){.c102-motion-track{display:none!important}.c102-motion-static{display:block!important}}
@media(prefers-reduced-motion:reduce){.c102-motion-track{display:none!important}.c102-motion-static{display:block!important}}
html.gn93-reading .c102-motion-track{display:none!important}
html.gn93-reading .c102-motion-static{display:block!important}