/* Phase 1 — How It Works page */
.hiw-hero { padding-top:150px; padding-bottom:70px; min-height:92vh; display:flex; align-items:center; }
.hiw-hero-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.hiw-hero-copy h1 { margin:20px 0 18px; font-size:clamp(46px,6vw,76px); line-height:.98; letter-spacing:-.06em; max-width:720px; }
.hiw-hero-copy h1 span { color:var(--primary); }
.hiw-hero-copy > p { max-width:690px; color:var(--muted); line-height:1.75; font-size:16px; }
.hiw-mini-stats { margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hiw-mini-stats div { padding:14px 10px; border-radius:16px; text-align:center; background:rgba(255,255,255,.38); border:1px solid rgba(255,255,255,.62); box-shadow:inset 1px 1px 0 rgba(255,255,255,.7); }
.hiw-mini-stats strong { display:block; color:#354156; font-size:18px; letter-spacing:-.04em; }
.hiw-mini-stats span { display:block; margin-top:3px; color:var(--muted); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

.hiw-hero-demo { position:relative; }
.tutorial-player { border-radius:28px; padding:14px; overflow:hidden; box-shadow:24px 28px 70px rgba(89,103,123,.18), -16px -16px 45px rgba(255,255,255,.75); transform:rotate(1deg); }
.tutorial-topbar { height:38px; display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:0 7px; }
.tutorial-dots { display:flex; gap:5px; }.tutorial-dots span { width:7px; height:7px; border-radius:50%; background:#bfc9d6; }.tutorial-dots span:first-child{background:#f08a87}.tutorial-dots span:nth-child(2){background:#e8bd63}.tutorial-dots span:last-child{background:#63c5a5}
.tutorial-label { justify-self:center; display:flex; align-items:center; gap:6px; color:#5d6b7f; font-size:9px; font-weight:800; }.tutorial-label svg{width:13px;color:var(--primary)}
.tutorial-time { font-size:8px; color:#8390a2; font-weight:700; }
.tutorial-screen { min-height:425px; border-radius:19px; overflow:hidden; display:grid; grid-template-columns:58px 1fr 135px; position:relative; background:linear-gradient(135deg,#e8edf3,#f4f7fa); }
.demo-sidebar { padding:12px 8px; display:flex; flex-direction:column; gap:9px; background:rgba(255,255,255,.7); border-right:1px solid rgba(255,255,255,.95); }
.demo-logo,.demo-side-item { height:37px; border-radius:11px; display:grid; place-items:center; color:#7d8999; }.demo-logo{color:white;background:linear-gradient(135deg,var(--primary),#8989ef)}.demo-logo svg,.demo-side-item svg{width:16px}.demo-side-item.active{color:var(--primary);background:var(--primary-soft)}
.demo-canvas { display:grid; place-items:center; padding:22px 12px; }
.demo-paper { width:225px; min-height:330px; padding:18px; background:white; border-radius:5px; box-shadow:0 13px 28px rgba(78,92,111,.16); transform:rotate(-1deg); }
.demo-paper-brand{text-align:center;font-size:18px;font-weight:900;letter-spacing:.08em}.demo-rule{height:3px;background:#222c3b;margin:9px 0 13px}.demo-main-image{height:115px;border-radius:3px;background:linear-gradient(135deg,#b9c5d2,#e1e6eb)}.demo-heading{width:88%;height:15px;margin:13px 0 8px;background:#202a38;border-radius:2px}.demo-copy{display:grid;gap:5px}.demo-copy i{height:5px;background:#d2d9e1;border-radius:3px}.demo-copy i:last-child{width:72%}.demo-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}.demo-columns span{height:70px;background:#edf0f3;border-radius:3px}
.demo-panel { padding:19px 12px; background:rgba(255,255,255,.65); border-left:1px solid rgba(255,255,255,.9); }.demo-panel small{color:var(--primary);font-size:7px;font-weight:800;letter-spacing:.08em}.demo-panel strong{display:block;font-size:11px;margin:3px 0 13px}.demo-layouts{display:grid;gap:7px}.demo-layouts>span{height:42px;padding:5px;border-radius:8px;background:#eef2f6;display:flex;gap:3px;box-shadow:inset 2px 2px 5px #d9dfe6,inset -2px -2px 5px white}.demo-layouts i{display:block;flex:1;background:#bbc6d3;border-radius:3px}.demo-layouts .selected{outline:1.5px solid var(--primary);background:var(--primary-soft)}.demo-panel button{width:100%;border:0;border-radius:9px;padding:9px 5px;margin-top:13px;background:var(--primary);color:white;font-size:8px;font-weight:800}
.play-overlay { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }.play-overlay span{width:68px;height:68px;border-radius:24px;display:grid;place-items:center;color:white;background:rgba(92,92,226,.88);box-shadow:0 18px 35px rgba(92,92,226,.28);backdrop-filter:blur(6px)}.play-overlay svg{width:28px;fill:currentColor}
.tutorial-progress { height:4px; border-radius:99px; margin:12px 6px 1px; background:#dfe5ec; overflow:hidden; }.tutorial-progress span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#8d69ef)}
.tutorial-note { position:absolute; right:-20px; bottom:-34px; max-width:315px; padding:13px 14px; border-radius:17px; display:flex; gap:10px; align-items:center; box-shadow:0 16px 35px rgba(78,92,111,.14); }.tutorial-note>i{width:22px;color:var(--primary)}.tutorial-note strong,.tutorial-note small{display:block}.tutorial-note strong{font-size:10px}.tutorial-note small{font-size:8px;color:var(--muted);margin-top:2px;line-height:1.35}

.compact-section { padding-top:65px; padding-bottom:45px; }
.step-jump-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:9px; }
.step-jump { min-width:0; border-radius:18px; padding:14px 9px 12px; text-align:center; background:rgba(255,255,255,.44); border:1px solid rgba(255,255,255,.75); box-shadow:8px 8px 18px rgba(136,151,169,.10), -7px -7px 16px rgba(255,255,255,.75); transition:.25s ease; position:relative; }
.step-jump:hover,.step-jump.active { transform:translateY(-4px); background:rgba(246,246,255,.72); box-shadow:0 13px 27px rgba(92,92,226,.13); }
.step-jump>span { position:absolute; top:7px; right:8px; color:rgba(92,92,226,.25); font-size:8px; font-weight:900; }.step-jump>i{width:20px;height:20px;margin:5px auto 9px;color:var(--primary)}.step-jump strong{display:block;font-size:8px;line-height:1.25;color:#4a5669}

.detail-steps-section { padding-top:75px; }
.detail-steps { display:grid; gap:110px; }
.detail-step { scroll-margin-top:110px; display:grid; grid-template-columns:.85fr 1.15fr; gap:76px; align-items:center; }
.detail-step.reverse .detail-copy { order:2; }.detail-step.reverse .detail-visual { order:1; }
.detail-step-label { display:flex; align-items:center; gap:9px; color:var(--primary); font-size:9px; font-weight:900; letter-spacing:.12em; }.detail-step-label span{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:var(--primary-soft);box-shadow:inset 1px 1px 0 white}
.detail-icon { width:62px; height:62px; margin-top:20px; border-radius:20px; display:grid; place-items:center; color:var(--primary); background:rgba(255,255,255,.52); box-shadow:8px 8px 18px rgba(133,149,168,.13), -7px -7px 18px rgba(255,255,255,.9), inset 1px 1px 0 white; }.detail-icon svg{width:28px}
.detail-copy h2 { margin:18px 0 11px; font-size:clamp(31px,4vw,48px); letter-spacing:-.045em; line-height:1.03; }.detail-copy>p{color:var(--muted);font-size:14px;line-height:1.72;max-width:560px}
.detail-points { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:24px; }.detail-points div{display:flex;gap:8px;align-items:flex-start;color:#566477;font-size:11px;line-height:1.45}.detail-points svg{width:15px;min-width:15px;color:var(--accent);stroke-width:2.8}
.detail-visual { position:relative; }
.ui-card { width:min(100%,620px); min-height:400px; margin-inline:auto; border-radius:29px; padding:28px; box-shadow:18px 22px 52px rgba(102,117,137,.15), -12px -12px 35px rgba(255,255,255,.7); }
.ui-card-title { display:flex; align-items:center; gap:13px; margin-bottom:22px; }.ui-card-title small,.ui-card-title strong{display:block}.ui-card-title small{color:var(--muted);font-size:8px;margin-bottom:3px}.ui-card-title strong{font-size:15px}.ui-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;color:var(--primary);background:var(--primary-soft)}.ui-icon svg{width:20px}
.ui-card label { display:flex; justify-content:space-between; margin:0 0 6px; color:#657287; font-size:8px; font-weight:800; }.ui-card label em{font-style:normal;font-weight:600;color:#97a2b1}.fake-field{padding:12px 13px;margin-bottom:12px;border-radius:12px;color:#445166;font-size:10px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.82);box-shadow:inset 2px 2px 5px rgba(134,149,168,.10),inset -2px -2px 5px white}.muted-field{color:#9aa5b4}.pin-field{letter-spacing:.35em}.fake-action{padding:12px 15px;border-radius:12px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:6px;color:white;background:linear-gradient(135deg,var(--primary),#7e7eea);font-size:9px;font-weight:800;box-shadow:0 10px 22px rgba(92,92,226,.18)}.fake-action svg{width:13px}

.profile-demo { padding:0 25px 25px; overflow:hidden; }.profile-cover{height:105px;margin:0 -25px;background:linear-gradient(135deg,rgba(92,92,226,.35),rgba(45,196,166,.23)),radial-gradient(circle at 70% 20%,rgba(255,255,255,.75),transparent 26%)}.profile-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:-30px}.avatar-demo{width:68px;height:68px;border:5px solid #eff3f7;border-radius:21px;display:grid;place-items:center;background:white;color:var(--primary);box-shadow:0 12px 24px rgba(93,107,126,.13)}.avatar-demo svg{width:29px}.profile-head strong,.profile-head span{display:block}.profile-head strong{font-size:13px;margin-top:28px}.profile-head span{font-size:8px;color:var(--muted);margin-top:3px}.profile-head button{margin-top:27px;border:0;width:36px;height:36px;border-radius:12px;color:var(--primary);background:#edf1f6;box-shadow:inset 1px 1px 0 white}.profile-head button svg{width:15px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}.profile-grid>div{padding:12px;border-radius:12px;background:rgba(255,255,255,.48)}.profile-grid small,.profile-grid strong{display:block}.profile-grid small{font-size:7px;color:var(--muted)}.profile-grid strong{font-size:9px;margin-top:3px}.active-plan{color:var(--accent)}.brand-upload{display:flex;gap:10px;align-items:center;margin-top:15px;padding:12px;border-radius:14px;border:1px dashed rgba(92,92,226,.3);background:rgba(92,92,226,.045)}.brand-upload>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:white}.brand-upload svg{width:17px}.brand-upload strong,.brand-upload small{display:block}.brand-upload strong{font-size:9px}.brand-upload small{font-size:7px;color:var(--muted);margin-top:3px}

.create-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px }.create-grid>div{padding:14px;border-radius:13px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.7)}.create-grid small,.create-grid strong{display:block}.create-grid small{font-size:7px;color:var(--muted)}.create-grid strong{font-size:9px;margin-top:4px}.page-stack{display:flex;gap:10px;align-items:stretch;margin-top:25px}.page-thumb{width:82px;height:108px;border-radius:11px;padding:9px;background:white;box-shadow:0 9px 20px rgba(101,115,134,.12);position:relative}.page-thumb.active{outline:2px solid var(--primary)}.page-thumb span{position:absolute;right:6px;top:5px;font-size:7px;font-weight:900;color:var(--primary)}.page-thumb i{display:block;height:100%;border-radius:5px;background:linear-gradient(#2f3947 0 8%,transparent 8% 11%,#e4e9ee 11% 40%,transparent 40% 43%,#eceff3 43%)}.page-stack button{border:1px dashed #aab5c3;border-radius:11px;min-width:90px;color:#68758a;background:rgba(255,255,255,.35);font-size:8px;font-weight:700}.page-stack button svg{width:13px;vertical-align:middle}

.template-tabs{display:flex;gap:5px;padding:5px;border-radius:13px;background:rgba(224,230,237,.8)}.template-tabs button{flex:1;border:0;border-radius:9px;padding:9px;background:transparent;color:#7b8798;font-size:8px;font-weight:800}.template-tabs button.active{color:var(--primary);background:white;box-shadow:0 4px 10px rgba(91,106,126,.10)}.layout-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.layout-tile{min-height:110px;padding:10px 10px 25px;border-radius:14px;background:#edf1f5;display:flex;gap:5px;box-shadow:inset 3px 3px 7px #dce2e8,inset -3px -3px 7px white;position:relative}.layout-tile.selected{outline:2px solid var(--primary);background:var(--primary-soft)}.layout-tile span{flex:1;border-radius:5px;background:#bac5d2}.layout-tile .two-third{flex:2}.layout-tile.triple span{flex:1}.layout-tile.center span:nth-child(2){flex:2}.layout-tile b{position:absolute;left:10px;bottom:7px;font-size:7px;color:#69768a}.template-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:17px}.template-bottom span{font-size:8px;color:var(--muted)}.template-bottom button{border:0;border-radius:10px;padding:10px 14px;background:var(--primary);color:white;font-size:8px;font-weight:800}

.content-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}.content-preview{min-height:335px;padding:17px;border-radius:14px;background:white;box-shadow:0 12px 27px rgba(82,96,115,.13)}.content-image{height:145px;border-radius:8px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;color:#8b97a8;background:linear-gradient(135deg,#e5eaf0,#f3f5f7)}.content-image svg{width:25px}.content-image span{font-size:8px}.content-title{margin:16px 0 10px;font-weight:900;font-size:16px;line-height:1.15}.content-lines{display:grid;gap:6px}.content-lines i{height:5px;background:#e4e8ec;border-radius:3px}.content-lines i:last-child{width:70%}.content-controls{align-self:center}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.content-controls button{width:100%;border:0;border-radius:11px;padding:11px;color:var(--primary);background:var(--primary-soft);font-size:8px;font-weight:800}.content-controls button svg{width:13px;vertical-align:middle}

.ai-demo-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:20px}.ai-demo-head>span{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--primary),#8a6dec);box-shadow:0 12px 24px rgba(92,92,226,.24)}.ai-demo-head svg{width:21px}.ai-demo-head small,.ai-demo-head strong{display:block}.ai-demo-head small{font-size:7px;color:var(--muted)}.ai-demo-head strong{font-size:13px;margin-top:3px}.ai-demo-head em{font-style:normal;padding:6px 8px;border-radius:8px;background:rgba(45,196,166,.1);color:#239d84;font-size:7px;font-weight:900}.ai-demo-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:3px 10px}.ai-result{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:10px 0 12px;padding:13px;border-radius:14px;background:rgba(45,196,166,.08);border:1px solid rgba(45,196,166,.13)}.ai-result>span{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;color:#239d84;background:white}.ai-result svg{width:16px}.ai-result>i{color:#239d84}.ai-result strong,.ai-result small{display:block}.ai-result strong{font-size:9px}.ai-result small{font-size:7px;color:var(--muted);margin-top:3px}

.settings-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid rgba(143,157,176,.17)}.settings-head strong{font-size:14px}.settings-head span{font-size:8px;color:var(--primary);font-weight:800}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(143,157,176,.13)}.setting-row>span{display:flex;align-items:center;gap:8px;color:#5d6b7f;font-size:9px;font-weight:700}.setting-row svg{width:15px;color:var(--primary)}.setting-row strong{font-size:9px}.swatch{display:flex;gap:6px;align-items:center}.swatch i{width:14px;height:14px;border-radius:5px;background:white;border:1px solid #d9e0e7}.setting-slider{display:grid;grid-template-columns:100px 1fr auto;gap:12px;align-items:center;padding:19px 0}.setting-slider>span{font-size:9px;color:#5d6b7f;font-weight:700}.setting-slider>div{height:5px;background:#d8dfe7;border-radius:99px}.setting-slider>div i{display:block;width:60%;height:100%;border-radius:inherit;background:var(--primary);position:relative}.setting-slider>div i::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:white;border:3px solid var(--primary)}.setting-slider strong{font-size:8px}.settings-toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-toggles>div{padding:13px;border-radius:13px;background:rgba(255,255,255,.44);display:flex;justify-content:space-between;align-items:center}.settings-toggles span{font-size:8px;font-weight:700}.toggle{width:30px;height:17px;border-radius:999px;background:#cad3dd;position:relative}.toggle::after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:white}.toggle.on{background:var(--primary)}.toggle.on::after{left:16px}

.preview-demo{padding:18px}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 6px 13px}.preview-toolbar>div:first-child{display:flex;gap:7px;align-items:center}.preview-toolbar svg{width:15px;color:var(--primary)}.preview-toolbar strong{font-size:10px}.preview-actions{display:flex;gap:6px}.preview-actions span{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.55)}.preview-stage{min-height:300px;border-radius:17px;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#dbe2e9,#edf1f5);box-shadow:inset 3px 3px 7px #cbd3dc,inset -3px -3px 7px white}.preview-paper{width:190px;min-height:255px;background:white;padding:14px;box-shadow:0 13px 24px rgba(82,96,115,.17);transform:rotate(-1deg)}.preview-paper header{text-align:center;font-size:14px;font-weight:900;letter-spacing:.05em}.preview-rule{height:3px;background:#222c3b;margin:7px 0 9px}.preview-news{display:grid;grid-template-columns:1fr .9fr;gap:8px}.preview-photo{height:95px;background:#cbd5df;border-radius:3px}.preview-news>div:last-child{display:grid;align-content:start;gap:5px}.preview-news b{height:12px;background:#252f3c;border-radius:2px}.preview-news i{height:4px;background:#dce2e8;border-radius:2px}.preview-three{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}.preview-three span{height:70px;background:#eef1f4;border-radius:3px}.preview-footer{display:flex;justify-content:space-between;align-items:center;padding:13px 5px 0}.preview-footer span{display:flex;gap:5px;align-items:center;color:#648172;font-size:7px;font-weight:700}.preview-footer svg{width:12px;color:var(--accent)}.preview-footer button{border:0;border-radius:9px;padding:8px 10px;background:var(--primary-soft);color:var(--primary);font-size:7px;font-weight:800}.preview-footer button svg{width:11px;vertical-align:middle}

.export-head{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center}.export-head>span{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;color:var(--accent);background:rgba(45,196,166,.11)}.export-head svg{width:21px}.export-head small,.export-head strong{display:block}.export-head small{font-size:7px;color:var(--muted)}.export-head strong{font-size:12px;margin-top:3px}.export-head em{font-style:normal;font-size:7px;font-weight:900;color:#239d84;background:rgba(45,196,166,.1);padding:6px 9px;border-radius:8px}.export-list{display:grid;gap:9px;margin:24px 0}.export-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:13px;border-radius:14px;background:rgba(255,255,255,.44);border:1px solid rgba(255,255,255,.65)}.export-list>div.featured{background:linear-gradient(135deg,rgba(92,92,226,.12),rgba(255,255,255,.55));border-color:rgba(92,92,226,.17)}.export-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:white;box-shadow:0 6px 13px rgba(91,105,123,.08)}.export-list svg{width:16px}.export-list>div>i{color:#9aa6b5}.export-list strong,.export-list small{display:block}.export-list strong{font-size:9px}.export-list small{font-size:7px;color:var(--muted);margin-top:3px}.export-count{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.export-count>div{text-align:center;padding:12px 5px;border-radius:12px;background:rgba(255,255,255,.4)}.export-count strong,.export-count span{display:block}.export-count strong{font-size:14px}.export-count span{font-size:7px;color:var(--muted);margin-top:3px}

.device-workflow { border-radius:32px; padding:48px; display:grid; grid-template-columns:.85fr 1.15fr; gap:55px; align-items:center; overflow:hidden; }
.device-workflow-copy h2{margin:10px 0 13px;font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-.045em}.device-workflow-copy>p{color:var(--muted);font-size:13px;line-height:1.7}.device-workflow-list{display:grid;gap:9px;margin-top:22px}.device-workflow-list>div{display:flex;gap:10px;align-items:center;padding:11px;border-radius:13px;background:rgba(255,255,255,.42)}.device-workflow-list>div>i{width:18px;color:var(--primary)}.device-workflow-list strong,.device-workflow-list small{display:block}.device-workflow-list strong{font-size:9px}.device-workflow-list small{font-size:7px;color:var(--muted);margin-top:2px}
.qr-flow{display:grid;grid-template-columns:1fr auto 155px;gap:18px;align-items:center}.qr-desktop{min-height:255px;padding:10px;border-radius:18px;background:#eff3f7;box-shadow:14px 16px 35px rgba(96,111,131,.14),-10px -10px 25px white}.qr-window-bar{height:25px;border-radius:10px 10px 5px 5px;background:#d8dfe7}.qr-window-body{display:grid;place-items:center;text-align:center;padding:19px}.qr-box{width:112px;height:112px;background:white;border-radius:12px;position:relative;padding:13px;box-shadow:inset 0 0 0 1px #e4e9ee}.qr-box span{position:absolute;width:27px;height:27px;border:6px solid #293343}.qr-box span:nth-child(1){left:12px;top:12px}.qr-box span:nth-child(2){right:12px;top:12px}.qr-box span:nth-child(3){left:12px;bottom:12px}.qr-box span:nth-child(4){right:19px;bottom:19px;width:15px;height:15px;border-width:4px}.qr-box i{position:absolute;left:49px;top:47px;width:22px;height:22px;background:repeating-linear-gradient(45deg,#293343 0 4px,transparent 4px 7px)}.qr-window-body strong{font-size:9px;margin-top:11px}.qr-window-body small{font-size:7px;color:var(--muted);margin-top:4px}.flow-arrow{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:var(--primary);background:white;box-shadow:0 7px 16px rgba(91,105,123,.1)}.flow-arrow svg{width:18px}.qr-phone{height:275px;border-radius:28px;padding:11px 15px 18px;text-align:center;background:linear-gradient(155deg,#f7f9fb,#e5ebf1);box-shadow:13px 15px 30px rgba(96,111,131,.16),-9px -9px 23px white}.qr-phone-notch{width:48px;height:13px;margin:0 auto 35px;border-radius:0 0 10px 10px;background:#303a49}.approved-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;margin:0 auto 15px;color:#239d84;background:rgba(45,196,166,.12)}.approved-icon svg{width:27px}.qr-phone strong,.qr-phone small{display:block}.qr-phone strong{font-size:10px}.qr-phone small{font-size:7px;color:var(--muted);margin:5px 0 18px}.qr-phone button{width:100%;border:0;border-radius:10px;padding:10px;color:white;background:var(--primary);font-size:8px;font-weight:800}

.hiw-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hiw-note-card{min-height:225px;border-radius:25px;padding:28px;display:grid;grid-template-columns:auto 1fr;gap:18px}.note-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:var(--primary);background:var(--primary-soft)}.note-icon.accent{color:#239d84;background:rgba(45,196,166,.11)}.note-icon svg{width:24px}.hiw-note-card small{font-size:8px;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;font-weight:800}.hiw-note-card h3{font-size:19px;line-height:1.2;letter-spacing:-.025em;margin:8px 0}.hiw-note-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}

@media (max-width:1080px){
    .hiw-hero-grid{grid-template-columns:1fr;gap:55px}.hiw-hero-copy{max-width:820px}.hiw-hero-demo{max-width:820px;width:100%;margin:auto}.step-jump-grid{grid-template-columns:repeat(5,1fr)}.detail-step,.detail-step.reverse{grid-template-columns:1fr;gap:38px}.detail-step.reverse .detail-copy,.detail-step.reverse .detail-visual{order:initial}.detail-copy{max-width:700px}.device-workflow{grid-template-columns:1fr}.qr-flow{max-width:650px;width:100%;margin:auto}
}
@media (max-width:780px){
    .hiw-hero{padding-top:125px;min-height:auto}.hiw-hero-copy h1{font-size:clamp(42px,11vw,62px)}.hiw-mini-stats{grid-template-columns:repeat(2,1fr)}.tutorial-screen{grid-template-columns:48px 1fr}.demo-panel{display:none}.demo-paper{width:210px}.tutorial-note{position:relative;right:auto;bottom:auto;margin:12px 0 0 10px}.step-jump-grid{grid-template-columns:repeat(3,1fr)}.detail-steps{gap:80px}.detail-points{grid-template-columns:1fr}.ui-card{padding:22px;min-height:auto}.content-demo{grid-template-columns:1fr}.content-preview{min-height:300px}.device-workflow{padding:32px 22px}.qr-flow{grid-template-columns:1fr}.flow-arrow{margin:auto;transform:rotate(90deg)}.qr-phone{width:155px;margin:auto}.hiw-note-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
    .hiw-hero{padding-top:110px}.hiw-hero-copy>p{font-size:14px}.tutorial-player{padding:9px;border-radius:22px;transform:none}.tutorial-screen{min-height:360px;grid-template-columns:40px 1fr}.demo-sidebar{padding:9px 5px}.demo-logo,.demo-side-item{height:34px}.demo-paper{width:min(195px,100%);min-height:300px;padding:14px}.play-overlay span{width:56px;height:56px;border-radius:19px}.step-jump-grid{grid-template-columns:repeat(2,1fr)}.step-jump{padding:12px 8px}.detail-steps{gap:65px}.detail-copy h2{font-size:34px}.ui-card{border-radius:22px;padding:18px}.profile-demo{padding:0 18px 18px}.profile-cover{margin:0 -18px}.profile-grid{grid-template-columns:1fr}.create-grid{grid-template-columns:1fr}.page-stack{overflow-x:auto;padding-bottom:4px}.layout-gallery{grid-template-columns:1fr 1fr}.control-row{grid-template-columns:1fr}.ai-demo-grid{grid-template-columns:1fr}.settings-toggles{grid-template-columns:1fr}.setting-slider{grid-template-columns:80px 1fr auto}.preview-stage{padding:13px}.qr-desktop{min-height:235px}.hiw-note-card{grid-template-columns:1fr;gap:12px}.note-icon{width:45px;height:45px}
}