/* External Drive Duplicate Finder — page styles.
The layout system below (.sec / .row / .feature-list / [data-reveal] …) is the
same one used by duplicate-photo-finder.html; it lives inside that page's own
stylesheet, so it is copied here unchanged instead of loading that file.
duplicate-photo-finder.css is not modified. */
:root{
--blue:#1B89FE; --blue-d:#0f6fd0; --purple:#7A6FF0; --pink:#E273FF;
--teal:#0fa97a; --ink:#1b2740; --muted:#5a6b88; --line:#e5ebf5;
--soft:#f5f8fe; --r-lg:22px; --r-md:16px; --r-sm:12px;
--grad:linear-gradient(90deg,var(--blue),var(--purple));
--grad2:linear-gradient(135deg,var(--blue),var(--purple));
--sh-1:0 12px 26px -20px rgba(31,42,68,.15);
--sh-2:0 24px 48px -22px rgba(31,42,68,.22);
}
/*--------------------------------------------------------------
Banner
--------------------------------------------------------------*/
.ext-header{padding-top:32px}
.ext-header .text-area{padding-top:8px}
.ext-header h1{max-width:520px;font-size:36px;line-height:1.2}
.ext-header .dp-list{max-width:500px}
.ext-header .hero img{max-width:80%;height:auto;display:block;margin:0 auto 10px}
.ext-header .hero img.hero-art{max-width:100%;height:auto;display:block;margin:0}
.ext-header .hero .ph{max-width:520px;aspect-ratio:6/5;margin:0 auto 10px}
/*--------------------------------------------------------------
Layout system
--------------------------------------------------------------*/
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0}
@media(min-width:768px) and (max-width:1024px){.wrap{padding:0 40px}}
@media(max-width:767px){.wrap{padding:0 20px}}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);will-change:opacity,transform}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
.sec{padding:96px 0}
.sec.alt{background:#F2F8FF}
.sec-head{text-align:center;max-width:760px;margin:0 auto 56px}
.sec-title{font-size:clamp(27px,3vw,35px);line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:0 0 16px}
.sec-title::after{content:"";display:block;width:64px;height:4px;border-radius:999px;background:var(--grad);margin:20px auto 0}
.sec-title.no-line::after{display:none}
.sec-lede{font-size:16px;line-height:1.5;color:var(--muted);margin:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin:64px 0}
.row.flip .row-visual{order:2}
.sec > .wrap > .row:last-child{margin-bottom:0}
.row-visual{display:flex;justify-content:center}
.row-visual img{max-width:100%;height:auto;display:block}
.row-visual .ph{aspect-ratio:3/2}
.row-text h3{font-size:23px;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em;line-height:1.35}
.row-text p{font-size:16px;line-height:1.5;color:#45536f;margin:0 0 12px}
.row-text p:last-child{margin-bottom:0}
.row-text ul.feature-list{display:block;grid-template-rows:none;list-style:none;margin:0 0 12px;padding:0;background:transparent}
.feature-list li{position:relative;padding-left:24px;margin:0 0 8px;font-size:16px;line-height:1.5;color:#45536f}
.feature-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:#2589ff}
.feature-list li b{color:var(--ink)}
.feature-list li:last-child{margin-bottom:0}
/*--------------------------------------------------------------
In-content text links
common-banner.css applies a site-wide `a { color: black; text-decoration: none }`
reset, which left the links in the body copy looking like plain text. Restore
the blue only, with no underline. Scoped to this page's body copy so the header,
top menu, footer and button-styled links elsewhere on the site are untouched.
--------------------------------------------------------------*/
.external-drive-page .row-text p a,
.external-drive-page .feature-list li a,
.external-drive-page .spec p a,
.external-drive-page .uc p a,
.external-drive-page .sec-lede a{color:var(--blue);text-decoration:none}
.external-drive-page .row-text p a:hover,
.external-drive-page .feature-list li a:hover,
.external-drive-page .spec p a:hover,
.external-drive-page .uc p a:hover,
.external-drive-page .sec-lede a:hover{color:var(--blue-d)}
/*--------------------------------------------------------------
Image placeholders — every figure position is drawn as a dashed box so the
layout is visible before the real PNGs are in place. Replace the whole
…
with the matching tag.
--------------------------------------------------------------*/
.ph{
display:flex;align-items:center;justify-content:center;text-align:center;
box-sizing:border-box;width:100%;padding:14px;
border:2px dashed #b9cde8;border-radius:var(--r-md);
background:repeating-linear-gradient(45deg,#f8fbff,#f8fbff 10px,#eef5ff 10px,#eef5ff 20px);
color:#7c93b5;font-size:13px;line-height:1.5
}
.ph--icon{width:100%;height:100%;padding:0;border-radius:12px;font-size:0}
/*--------------------------------------------------------------
Wide range of external drives (section 1)
--------------------------------------------------------------*/
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:8px auto 0}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:30px 26px;box-shadow:var(--sh-1);text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.spec:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--blue)}
/* The 44/48px .ic boxes were copied from duplicate-photo-finder.css, where each
icon is a single-path